Tabs
Tabs organize similar content together into individual sections in the same page.
install | yarn add @clayui/tabs |
---|---|
version | 3.119.0 |
Stable3.119.0View in LexiconCHANGELOG
Don't forget to check WAI-ARIA accessibility pratices for Tabs when writting your markup.
Default
Single origin, extra id beans, eu to go, skinny americano ut aftertaste sugar. At americano, viennese variety iced grounds, grinder froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain affogato organic cappuccino java plunger pot. Single shot variety pumpkin spice seasonal skinny barista carajillo robust cream.
Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
At americano, viennese variety iced grounds, grinder froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain affogato organic cappuccino java plunger pot. Single shot variety pumpkin spice seasonal skinny barista carajillo robust cream.
Copied!
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a
aria-controls="fields"
aria-selected="true"
class="active nav-link"
data-toggle="tab"
href="#fields"
id="fieldsTab"
role="tab"
>Fields</a
>
</li>
<li class="nav-item">
<a
aria-controls="settings"
aria-selected="false"
class="nav-link"
data-toggle="tab"
href="#settings"
id="settingsTab"
role="tab"
>Settings</a
>
</li>
<li class="nav-item">
<a
aria-controls="documents"
aria-selected="false"
class="disabled nav-link"
data-toggle="tab"
href="#documents"
id="documentsTab"
role="tab"
tabindex="-1"
>Documents</a
>
</li>
<li class="dropdown nav-item">
<a
aria-expanded="false"
aria-haspopup="true"
class="dropdown-toggle nav-link"
data-toggle="dropdown"
href="#1"
role="button"
>
Configuration
<svg
class="lexicon-icon lexicon-icon-caret-bottom"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#caret-bottom" />
</svg>
</a>
<div class="dropdown-menu dropdown-menu-indicator-end">
<a
aria-controls="setup"
aria-selected="false"
class="dropdown-item"
data-toggle="tab"
href="#setup"
id="setupTab"
role="tab"
>
Setup
<span aria-hidden="true" class="dropdown-item-indicator">
<svg
class="lexicon-icon lexicon-icon-check"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</a>
<a
aria-controls="supportedClients"
aria-selected="false"
class="dropdown-item"
data-toggle="tab"
href="#supportedClients"
id="supportedClientsTab"
role="tab"
>
Supported Clients
<span aria-hidden="true" class="dropdown-item-indicator">
<svg
class="lexicon-icon lexicon-icon-check"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</a>
</div>
</li>
</ul>
<div class="tab-content">
<div
aria-labelledby="fieldsTab"
class="active fade show tab-pane"
id="fields"
role="tabpanel"
>
Single origin, extra id beans, eu to go, skinny americano ut aftertaste
sugar. At americano, viennese variety iced grounds, grinder froth and
pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait,
skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain
affogato organic cappuccino java plunger pot. Single shot variety
pumpkin spice seasonal skinny barista carajillo robust cream.
</div>
<div
aria-labelledby="settingsTab"
class="fade tab-pane"
id="settings"
role="tabpanel"
>
Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id
trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny
milk beans macchiato carajillo espresso. Cultivar single shot brewed,
coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic
espresso cinnamon crema breve.
</div>
<div
aria-labelledby="documentsTab"
class="fade tab-pane"
id="documents"
role="tabpanel"
>
Cultivar single shot brewed, coffee steamed to go wings to go cortado.
Grinder, siphon coffee acerbic espresso cinnamon crema breve.
</div>
<div
aria-labelledby="setupTab"
class="fade tab-pane"
id="setup"
role="tabpanel"
>
Skinny extraction, id trifecta qui trifecta grinder. Barista robusta
arabica breve ut skinny milk beans macchiato carajillo espresso.
Cultivar single shot brewed, coffee steamed to go wings to go cortado.
Grinder, siphon coffee acerbic espresso cinnamon crema breve.
</div>
<div
aria-labelledby="supportedClientsTab"
class="fade tab-pane"
id="supportedClients"
role="tabpanel"
>
At americano, viennese variety iced grounds, grinder froth and pumpkin
spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue
mountain, in variety sugar shop roast. Wings, blue mountain affogato
organic cappuccino java plunger pot. Single shot variety pumpkin spice
seasonal skinny barista carajillo robust cream.
</div>
</div>
Modern (Deprecated)
Warning
The styles for the `.nav-underline` class have been removed after 3.89.0. Please see the adding nav-underline section to re-add this in your theme.
Use .nav-underline
instead of .nav-tabs
.
Single origin, extra id beans, eu to go, skinny americano ut aftertaste sugar. At americano, viennese variety iced grounds, grinder froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain affogato organic cappuccino java plunger pot. Single shot variety pumpkin spice seasonal skinny barista carajillo robust cream.
Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
At americano, viennese variety iced grounds, grinder froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain affogato organic cappuccino java plunger pot. Single shot variety pumpkin spice seasonal skinny barista carajillo robust cream.
Copied!
<div class="sheet-example">
<ul class="nav nav-underline" role="tablist">
<li class="nav-item">
<a
aria-controls="navUnderlineFields"
aria-selected="true"
class="active nav-link"
data-toggle="tab"
href="#navUnderlineFields"
id="navUnderlineFieldsTab"
role="tab"
>Fields</a
>
</li>
<li class="nav-item">
<a
aria-controls="navUnderlineSettings"
aria-selected="false"
class="nav-link"
data-toggle="tab"
href="#navUnderlineSettings"
id="navUnderlineSettingsTab"
role="tab"
>Settings</a
>
</li>
<li class="nav-item">
<a
aria-controls="navUnderlineDocuments"
aria-selected="false"
class="disabled nav-link"
data-toggle="tab"
href="#navUnderlineDocuments"
id="navUnderlineDocumentsTab"
role="tab"
tabindex="-1"
>Documents</a
>
</li>
<li class="dropdown nav-item">
<a
aria-expanded="false"
aria-haspopup="true"
class="dropdown-toggle nav-link"
data-toggle="dropdown"
href="#1"
role="button"
>
Configuration
<svg
class="lexicon-icon lexicon-icon-caret-bottom"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#caret-bottom" />
</svg>
</a>
<div class="dropdown-menu dropdown-menu-indicator-end">
<a
aria-controls="navUnderlineSetup"
aria-selected="false"
class="dropdown-item"
data-toggle="tab"
href="#navUnderlineSetup"
id="navUnderlineSetupTab"
role="tab"
>
Setup
<span aria-hidden="true" class="dropdown-item-indicator">
<svg
class="lexicon-icon lexicon-icon-check"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</a>
<a
aria-controls="navUnderlineSupportedClients"
aria-selected="false"
class="dropdown-item"
data-toggle="tab"
href="#navUnderlineSupportedClients"
id="navUnderlineSupportedClientsTab"
role="tab"
>
Supported Clients
<span aria-hidden="true" class="dropdown-item-indicator">
<svg
class="lexicon-icon lexicon-icon-check"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</a>
</div>
</li>
</ul>
<div class="tab-content">
<div
aria-labelledby="navUnderlineFieldsTab"
class="active fade show tab-pane"
id="navUnderlineFields"
role="tabpanel"
>
Single origin, extra id beans, eu to go, skinny americano ut
aftertaste sugar. At americano, viennese variety iced grounds,
grinder froth and pumpkin spice aromatic. Cultivar aged lungo,
grounds café au lait, skinny, blue mountain, in variety sugar shop
roast. Wings, blue mountain affogato organic cappuccino java plunger
pot. Single shot variety pumpkin spice seasonal skinny barista
carajillo robust cream.
</div>
<div
aria-labelledby="navUnderlineSettingsTab"
class="fade tab-pane"
id="navUnderlineSettings"
role="tabpanel"
>
Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction,
id trifecta qui trifecta grinder. Barista robusta arabica breve ut
skinny milk beans macchiato carajillo espresso. Cultivar single shot
brewed, coffee steamed to go wings to go cortado. Grinder, siphon
coffee acerbic espresso cinnamon crema breve.
</div>
<div
aria-labelledby="navUnderlineDocumentsTab"
class="fade tab-pane"
id="navUnderlineDocuments"
role="tabpanel"
>
Cultivar single shot brewed, coffee steamed to go wings to go
cortado. Grinder, siphon coffee acerbic espresso cinnamon crema
breve.
</div>
<div
aria-labelledby="navUnderlineSetupTab"
class="fade tab-pane"
id="navUnderlineSetup"
role="tabpanel"
>
Skinny extraction, id trifecta qui trifecta grinder. Barista robusta
arabica breve ut skinny milk beans macchiato carajillo espresso.
Cultivar single shot brewed, coffee steamed to go wings to go
cortado. Grinder, siphon coffee acerbic espresso cinnamon crema
breve.
</div>
<div
aria-labelledby="navUnderlineSupportedClientsTab"
class="fade tab-pane"
id="navUnderlineSupportedClients"
role="tabpanel"
>
At americano, viennese variety iced grounds, grinder froth and
pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait,
skinny, blue mountain, in variety sugar shop roast. Wings, blue
mountain affogato organic cappuccino java plunger pot. Single shot
variety pumpkin spice seasonal skinny barista carajillo robust
cream.
</div>
</div>
</div>
Variations
Buttons
You can use buttons for tab items.
Single origin, extra id beans, eu to go, skinny americano ut aftertaste sugar. At americano, viennese variety iced grounds, grinder froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain affogato organic cappuccino java plunger pot. Single shot variety pumpkin spice seasonal skinny barista carajillo robust cream.
Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
At americano, viennese variety iced grounds, grinder froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain affogato organic cappuccino java plunger pot. Single shot variety pumpkin spice seasonal skinny barista carajillo robust cream.
Copied!
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<button
aria-controls="buttonFields"
aria-selected="true"
class="active btn btn-unstyled nav-link"
data-target="#buttonFields"
data-toggle="tab"
id="buttonFieldsTab"
role="tab"
type="button"
>
Fields
</button>
</li>
<li class="nav-item">
<button
aria-controls="buttonSettings"
aria-selected="false"
class="btn btn-unstyled nav-link"
data-target="#buttonSettings"
data-toggle="tab"
id="buttonSettingsTab"
role="tab"
type="button"
>
Settings
</button>
</li>
<li class="nav-item">
<button
aria-controls="buttonDocuments"
aria-selected="false"
class="disabled btn btn-unstyled nav-link"
data-target="#buttonDocuments"
data-toggle="tab"
id="buttonDocumentsTab"
role="tab"
tabindex="-1"
type="button"
>
Documents
</button>
</li>
<li class="dropdown nav-item">
<button
aria-expanded="false"
aria-haspopup="true"
class="dropdown-toggle btn btn-unstyled nav-link"
data-toggle="dropdown"
type="button"
>
Configuration
<svg
class="lexicon-icon lexicon-icon-caret-button"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#caret-button"></use>
</svg>
</button>
<ul class="dropdown-menu dropdown-menu-indicator-end">
<li>
<button
aria-controls="buttonSetup"
aria-selected="false"
class="dropdown-item"
data-target="#buttonSetup"
data-toggle="tab"
id="buttonSetupTab"
role="tab"
type="button"
>
Setup
<span
aria-hidden="true"
class="dropdown-item-indicator-end"
>
<svg
class="lexicon-icon lexicon-icon-check"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check"></use>
</svg>
</span>
</button>
</li>
<li>
<button
aria-controls="buttonSupportedClients"
aria-selected="false"
class="dropdown-item"
data-target="#buttonSupportedClients"
data-toggle="tab"
id="supportedClientsTab"
role="tab"
>
Supported Clients
<span
aria-hidden="true"
class="dropdown-item-indicator-end"
>
<svg
class="lexicon-icon lexicon-icon-check"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check"></use>
</svg>
</span>
</button>
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div
aria-labelledby="buttonFieldsTab"
class="active fade show tab-pane"
id="buttonFields"
role="tabpanel"
>
Single origin, extra id beans, eu to go, skinny americano ut aftertaste
sugar. At americano, viennese variety iced grounds, grinder froth and
pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait,
skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain
affogato organic cappuccino java plunger pot. Single shot variety
pumpkin spice seasonal skinny barista carajillo robust cream.
</div>
<div
aria-labelledby="buttonSettingsTab"
class="fade tab-pane"
id="buttonSettings"
role="tabpanel"
>
Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id
trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny
milk beans macchiato carajillo espresso. Cultivar single shot brewed,
coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic
espresso cinnamon crema breve.
</div>
<div
aria-labelledby="buttonDocumentsTab"
class="fade tab-pane"
id="buttonDocuments"
role="tabpanel"
>
Cultivar single shot brewed, coffee steamed to go wings to go cortado.
Grinder, siphon coffee acerbic espresso cinnamon crema breve.
</div>
<div
aria-labelledby="buttonSetupTab"
class="fade tab-pane"
id="buttonSetup"
role="tabpanel"
>
Skinny extraction, id trifecta qui trifecta grinder. Barista robusta
arabica breve ut skinny milk beans macchiato carajillo espresso.
Cultivar single shot brewed, coffee steamed to go wings to go cortado.
Grinder, siphon coffee acerbic espresso cinnamon crema breve.
</div>
<div
aria-labelledby="buttonSupportedClientsTab"
class="fade tab-pane"
id="buttonSupportedClients"
role="tabpanel"
>
At americano, viennese variety iced grounds, grinder froth and pumpkin
spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue
mountain, in variety sugar shop roast. Wings, blue mountain affogato
organic cappuccino java plunger pot. Single shot variety pumpkin spice
seasonal skinny barista carajillo robust cream.
</div>
</div>
Justified
You can justify the nav items according the tab content just adding .nav-justified
class on the .ul
element.
Single origin, extra id beans, eu to go, skinny americano ut aftertaste sugar. At americano, viennese variety iced grounds, grinder froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain affogato organic cappuccino java plunger pot. Single shot variety pumpkin spice seasonal skinny barista carajillo robust cream.
Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
At americano, viennese variety iced grounds, grinder froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain affogato organic cappuccino java plunger pot. Single shot variety pumpkin spice seasonal skinny barista carajillo robust cream.
Copied!
<ul class="nav nav-justified nav-tabs" role="tablist">
<li class="nav-item">
<a
aria-controls="navJustifiedFields"
aria-selected="true"
class="active nav-link"
data-toggle="tab"
href="#navJustifiedFields"
id="navJustifiedFieldsTab"
role="tab"
>Fields</a
>
</li>
<li class="nav-item">
<a
aria-controls="navJustifiedSettings"
aria-selected="false"
class="nav-link"
data-toggle="tab"
href="#navJustifiedSettings"
id="navJustifiedSettingsTab"
role="tab"
>Settings</a
>
</li>
<li class="nav-item">
<a
aria-controls="navJustifiedDocuments"
aria-selected="false"
class="disabled nav-link"
data-toggle="tab"
href="#navJustifiedDocuments"
id="navJustifiedDocumentsTab"
role="tab"
tabindex="-1"
>Documents</a
>
</li>
<li class="dropdown nav-item">
<a
aria-expanded="false"
aria-haspopup="true"
class="dropdown-toggle nav-link"
data-toggle="dropdown"
href="#1"
role="button"
>
Configuration
<svg
class="lexicon-icon lexicon-icon-caret-button"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#caret-button"></use>
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-indicator-end">
<li>
<a
aria-controls="navJustifiedSetup"
aria-selected="false"
class="dropdown-item"
data-toggle="tab"
href="#navJustifiedSetup"
id="navJustifiedSetupTab"
role="tab"
>
Setup
<span
aria-hidden="true"
class="dropdown-item-indicator-end"
>
<svg
class="lexicon-icon lexicon-icon-check"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check"></use>
</svg>
</span>
</a>
</li>
<li>
<a
aria-controls="navJustifiedSupportedClients"
aria-selected="false"
class="dropdown-item"
data-toggle="tab"
href="#navJustifiedSupportedClients"
id="navJustifiedSupportedClientsTab"
role="tab"
>
Supported Clients
<span
aria-hidden="true"
class="dropdown-item-indicator-end"
>
<svg
class="lexicon-icon lexicon-icon-check"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check"></use>
</svg>
</span>
</a>
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div
aria-labelledby="navJustifiedFieldsTab"
class="active fade show tab-pane"
id="navJustifiedFields"
role="tabpanel"
>
Single origin, extra id beans, eu to go, skinny americano ut aftertaste
sugar. At americano, viennese variety iced grounds, grinder froth and
pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait,
skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain
affogato organic cappuccino java plunger pot. Single shot variety
pumpkin spice seasonal skinny barista carajillo robust cream.
</div>
<div
aria-labelledby="navJustifiedSettingsTab"
class="fade tab-pane"
id="navJustifiedSettings"
role="tabpanel"
>
Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id
trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny
milk beans macchiato carajillo espresso. Cultivar single shot brewed,
coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic
espresso cinnamon crema breve.
</div>
<div
aria-labelledby="navJustifiedDocumentsTab"
class="fade tab-pane"
id="navJustifiedDocuments"
role="tabpanel"
>
Cultivar single shot brewed, coffee steamed to go wings to go cortado.
Grinder, siphon coffee acerbic espresso cinnamon crema breve.
</div>
<div
aria-labelledby="navJustifiedSetupTab"
class="fade tab-pane"
id="navJustifiedSetup"
role="tabpanel"
>
Skinny extraction, id trifecta qui trifecta grinder. Barista robusta
arabica breve ut skinny milk beans macchiato carajillo espresso.
Cultivar single shot brewed, coffee steamed to go wings to go cortado.
Grinder, siphon coffee acerbic espresso cinnamon crema breve.
</div>
<div
aria-labelledby="navJustifiedSupportedClientsTab"
class="fade tab-pane"
id="navJustifiedSupportedClients"
role="tabpanel"
>
At americano, viennese variety iced grounds, grinder froth and pumpkin
spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue
mountain, in variety sugar shop roast. Wings, blue mountain affogato
organic cappuccino java plunger pot. Single shot variety pumpkin spice
seasonal skinny barista carajillo robust cream.
</div>
</div>
Grid
Use bootstrap's grid inside list items in nav-tabs
.
Single origin, extra id beans, eu to go, skinny americano ut aftertaste sugar. At americano, viennese variety iced grounds, grinder froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain affogato organic cappuccino java plunger pot. Single shot variety pumpkin spice seasonal skinny barista carajillo robust cream.
Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
At americano, viennese variety iced grounds, grinder froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain affogato organic cappuccino java plunger pot. Single shot variety pumpkin spice seasonal skinny barista carajillo robust cream.
Copied!
<ul class="nav nav-tabs" role="tablist">
<li class="col-6 col-sm-3 nav-item">
<a
aria-controls="navTabsGridFields"
aria-selected="true"
class="active nav-link"
data-toggle="tab"
href="#navTabsGridFields"
id="navTabsGridFieldsTab"
role="tab"
>Fields</a
>
</li>
<li class="col-6 col-sm-3 nav-item">
<a
aria-controls="navTabsGridSettings"
aria-selected="false"
class="nav-link"
data-toggle="tab"
href="#navTabsGridSettings"
id="navTabsGridSettingsTab"
role="tab"
>Settings</a
>
</li>
<li class="col-6 col-sm-3 nav-item">
<a
aria-controls="navTabsGridDocuments"
aria-selected="false"
class="disabled nav-link"
data-toggle="tab"
href="#navTabsGridDocuments"
id="navTabsGridDocumentsTab"
role="tab"
tabindex="-1"
>Documents</a
>
</li>
<li class="col-6 col-sm-3 dropdown nav-item">
<a
aria-expanded="false"
aria-haspopup="true"
class="dropdown-toggle nav-link"
data-toggle="dropdown"
href="#1"
role="button"
>
Configuration
<svg
class="lexicon-icon lexicon-icon-caret-bottom"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#caret-bottom" />
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-indicator-end">
<li>
<a
aria-controls="navTabsGridSetup"
aria-selected="false"
class="dropdown-item"
data-toggle="tab"
href="#navTabsGridSetup"
id="navTabsGridSetupTab"
role="tab"
>
Setup
<span
aria-hidden="true"
class="dropdown-item-indicator-end"
>
<svg
class="lexicon-icon lexicon-icon-check"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</a>
</li>
<li>
<a
aria-controls="navTabsGridSupportedClients"
aria-selected="false"
class="dropdown-item"
data-toggle="tab"
href="#navTabsGridSupportedClients"
id="navTabsGridSupportedClientsTab"
role="tab"
>
Supported Clients
<span
aria-hidden="true"
class="dropdown-item-indicator-end"
>
<svg
class="lexicon-icon lexicon-icon-check"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</a>
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div
aria-labelledby="navTabsGridFieldsTab"
class="active fade show tab-pane"
id="navTabsGridFields"
role="tabpanel"
>
Single origin, extra id beans, eu to go, skinny americano ut aftertaste
sugar. At americano, viennese variety iced grounds, grinder froth and
pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait,
skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain
affogato organic cappuccino java plunger pot. Single shot variety
pumpkin spice seasonal skinny barista carajillo robust cream.
</div>
<div
aria-labelledby="navTabsGridSettingsTab"
class="fade tab-pane"
id="navTabsGridSettings"
role="tabpanel"
>
Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id
trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny
milk beans macchiato carajillo espresso. Cultivar single shot brewed,
coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic
espresso cinnamon crema breve.
</div>
<div
aria-labelledby="navTabsGridDocumentsTab"
class="fade tab-pane"
id="navTabsGridDocuments"
role="tabpanel"
>
Cultivar single shot brewed, coffee steamed to go wings to go cortado.
Grinder, siphon coffee acerbic espresso cinnamon crema breve.
</div>
<div
aria-labelledby="navTabsGridSetupTab"
class="fade tab-pane"
id="navTabsGridSetup"
role="tabpanel"
>
Skinny extraction, id trifecta qui trifecta grinder. Barista robusta
arabica breve ut skinny milk beans macchiato carajillo espresso.
Cultivar single shot brewed, coffee steamed to go wings to go cortado.
Grinder, siphon coffee acerbic espresso cinnamon crema breve.
</div>
<div
aria-labelledby="navTabsGridSupportedClientsTab"
class="fade tab-pane"
id="navTabsGridSupportedClients"
role="tabpanel"
>
At americano, viennese variety iced grounds, grinder froth and pumpkin
spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue
mountain, in variety sugar shop roast. Wings, blue mountain affogato
organic cappuccino java plunger pot. Single shot variety pumpkin spice
seasonal skinny barista carajillo robust cream.
</div>
</div>
Add Nav Underline
To re-add nav-underline
styles in your theme, copy and paste the variable code below in to your theme's _clay_variables.scss
file.
Classic
Copied!
// Nav Underline Link Highlight
$nav-underline-link-highlight-content: null !default;
$nav-underline-link-highlight-height: null !default;
$nav-underline-link-highlight-bottom: 0 !default;
$nav-underline-link-highlight-left: 0 !default;
$nav-underline-link-highlight-right: 0 !default;
$nav-underline-link-highlight-top: null !default;
$nav-underline-link-active-highlight: #5791ff !default;
$nav-underline-link-active-content: '' !default;
$nav-underline-link-active-highlight-height: 0.125rem !default; // 2px
$nav-underline-link-disabled-highlight: null !default;
// .nav-underline
$nav-underline-font-size: null !default;
$nav-underline-link-highlight-palette: null !default;
$nav-underline-link-color: #6B6C7E !default;
$nav-underline-link-padding-x: null !default;
$nav-underline-link-padding-y: null !default;
$nav-underline-link-hover-color: null !default;
$nav-underline-link-active-color: #272833 !default;
$nav-underline-link-disabled-color: #A7A9BC !default;
// .nav-underline .nav-link[aria-expanded='true']
$nav-underline-link-show: () !default;
$nav-underline-link-show: map-deep-merge(
(
color: $nav-underline-link-active-color,
after: (
content: $nav-underline-link-active-content,
height: $nav-underline-link-active-highlight-height,
),
),
$nav-underline-link-show
);
$nav-underline-link: () !default;
$nav-underline-link: map-deep-merge(
(
border-radius: 1px,
color: $nav-underline-link-color,
font-weight: 600,
line-height: 1,
padding-bottom: 0.5625rem,
padding-left: $nav-underline-link-padding-x,
padding-right: $nav-underline-link-padding-x,
padding-top: 0.5625rem,
transition: box-shadow 0.15s ease-in-out,
after: (
bottom: $nav-underline-link-highlight-bottom,
content: $nav-underline-link-highlight-content,
display: block,
height: $nav-underline-link-highlight-height,
position: absolute,
left: $nav-underline-link-highlight-left,
right: $nav-underline-link-highlight-right,
top: $nav-underline-link-highlight-top,
width: auto,
),
hover: (
color: $nav-underline-link-hover-color,
),
focus: (
box-shadow: #{0 0 0 0.125rem #FFF, 0 0 0 0.25rem #80ACFF},
color: $nav-underline-link-hover-color,
outline: 0,
),
active-class: (
color: $nav-underline-link-active-color,
after: (
background-color: $nav-underline-link-active-highlight,
content: $nav-underline-link-active-content,
height: $nav-underline-link-active-highlight-height,
),
),
show: $nav-underline-link-show,
disabled: (
box-shadow: none,
color: $nav-underline-link-disabled-color,
after: (
background-color: $nav-underline-link-disabled-highlight,
),
),
),
$nav-underline-link
);
// .nav-underline
$nav-underline: () !default;
$nav-underline: map-deep-merge(
(
font-size: $nav-underline-font-size,
nav-link: $nav-underline-link,
),
$nav-underline
);
$nav-palette: () !default;
$nav-palette: map-deep-merge(
(
nav-underline: $nav-underline,
),
$nav-palette
);
Styled
Copied!
// Nav Underline Link Highlight
$nav-underline-link-highlight-content: null !default;
$nav-underline-link-highlight-height: null !default;
$nav-underline-link-highlight-bottom: 0 !default;
$nav-underline-link-highlight-left: 0.5rem !default;
$nav-underline-link-highlight-right: 0.5rem !default;
$nav-underline-link-highlight-top: null !default;
$nav-underline-link-active-highlight: #47A0FF !default;
$nav-underline-link-active-content: '' !default;
$nav-underline-link-active-highlight-height: 0.1875rem !default;
$nav-underline-link-disabled-highlight: null !default;
// .nav-underline
$nav-underline-font-size: null !default;
$nav-underline-link-highlight-palette: null !default;
$nav-underline-link-color: null !default;
$nav-underline-link-padding-x: null !default;
$nav-underline-link-padding-y: null !default;
$nav-underline-link-hover-color: null !default;
$nav-underline-link-active-color: null !default;
$nav-underline-link-disabled-color: null !default;
// .nav-underline .nav-link[aria-expanded='true']
$nav-underline-link-show: () !default;
$nav-underline-link-show: map-deep-merge(
(
color: $nav-underline-link-active-color,
after: (
content: $nav-underline-link-active-content,
height: $nav-underline-link-active-highlight-height,
),
),
$nav-underline-link-show
);
$nav-underline-link: () !default;
$nav-underline-link: map-deep-merge(
(
color: $nav-underline-link-color,
padding-bottom: $nav-underline-link-padding-y,
padding-left: $nav-underline-link-padding-x,
padding-right: $nav-underline-link-padding-x,
padding-top: $nav-underline-link-padding-y,
after: (
bottom: $nav-underline-link-highlight-bottom,
content: $nav-underline-link-highlight-content,
display: block,
height: $nav-underline-link-highlight-height,
position: absolute,
left: $nav-underline-link-highlight-left,
right: $nav-underline-link-highlight-right,
top: $nav-underline-link-highlight-top,
width: auto,
),
hover: (
color: $nav-underline-link-hover-color,
),
focus: (
color: $nav-underline-link-hover-color,
),
active-class: (
color: $nav-underline-link-active-color,
after: (
background-color: $nav-underline-link-active-highlight,
content: $nav-underline-link-active-content,
height: $nav-underline-link-active-highlight-height,
),
),
show: $nav-underline-link-show,
disabled: (
color: $nav-underline-link-disabled-color,
after: (
background-color: $nav-underline-link-disabled-highlight,
),
),
),
$nav-underline-link
);
// .nav-underline
$nav-underline: () !default;
$nav-underline: map-deep-merge(
(
font-size: $nav-underline-font-size,
nav-link: $nav-underline-link,
),
$nav-underline
);
$nav-palette: () !default;
$nav-palette: map-deep-merge(
(
nav-underline: $nav-underline,
),
$nav-palette
);