Tabs

Tabs organize similar content together into individual sections in the same page.

install	yarn add @clayui/tabs
version
use	`import Tabs from '@clayui/tabs';`

Table of Contents

Default
Modern (Deprecated)
Variations
Buttons
Justified
Grid
Add Nav Underline
Classic
Styled

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.

Snippet

<ul className="nav nav-tabs" role="tablist">
  <li className="nav-item">
    <a
      aria-controls="fields"
      aria-selected="true"
      className="active nav-link"
      data-toggle="tab"
      href="#fields"
      id="fieldsTab"
      role="tab"
      >Fields</a
    >
  </li>
  <li className="nav-item">
    <a
      aria-controls="settings"
      aria-selected="false"
      className="nav-link"
      data-toggle="tab"
      href="#settings"
      id="settingsTab"
      role="tab"
      >Settings</a
    >
  </li>
  <li className="nav-item">
    <a
      aria-controls="documents"
      aria-selected="false"
      className="disabled nav-link"
      data-toggle="tab"
      href="#documents"
      id="documentsTab"
      role="tab"
      tabindex="-1"
      >Documents</a
    >
  </li>
  <li className="dropdown nav-item">
    <a
      aria-expanded="false"
      aria-haspopup="true"
      className="dropdown-toggle nav-link"
      data-toggle="dropdown"
      href="#1"
      role="button"
    >
      Configuration
      <svg
        className="lexicon-icon lexicon-icon-caret-bottom"
        focusable="false"
        role="presentation"
      >
        <use href="/icons.svg#caret-bottom" />
      </svg>
    </a>
    <div className="dropdown-menu dropdown-menu-indicator-end">
      <a
        aria-controls="setup"
        aria-selected="false"
        className="dropdown-item"
        data-toggle="tab"
        href="#setup"
        id="setupTab"
        role="tab"
      >
        Setup
        <span aria-hidden="true" className="dropdown-item-indicator">
          <svg
            className="lexicon-icon lexicon-icon-check"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#check" />
          </svg>
        </span>
      </a>
      <a
        aria-controls="supportedClients"
        aria-selected="false"
        className="dropdown-item"
        data-toggle="tab"
        href="#supportedClients"
        id="supportedClientsTab"
        role="tab"
      >
        Supported Clients
        <span aria-hidden="true" className="dropdown-item-indicator">
          <svg
            className="lexicon-icon lexicon-icon-check"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#check" />
          </svg>
        </span>
      </a>
    </div>
  </li>
</ul>
<div className="tab-content">
  <div
    aria-labelledby="fieldsTab"
    className="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"
    className="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"
    className="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"
    className="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"
    className="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.

Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.

Snippet

<div className="sheet-example">
  <ul className="nav nav-underline" role="tablist">
    <li className="nav-item">
      <a
        aria-controls="navUnderlineFields"
        aria-selected="true"
        className="active nav-link"
        data-toggle="tab"
        href="#navUnderlineFields"
        id="navUnderlineFieldsTab"
        role="tab"
        >Fields</a
      >
    </li>
    <li className="nav-item">
      <a
        aria-controls="navUnderlineSettings"
        aria-selected="false"
        className="nav-link"
        data-toggle="tab"
        href="#navUnderlineSettings"
        id="navUnderlineSettingsTab"
        role="tab"
        >Settings</a
      >
    </li>
    <li className="nav-item">
      <a
        aria-controls="navUnderlineDocuments"
        aria-selected="false"
        className="disabled nav-link"
        data-toggle="tab"
        href="#navUnderlineDocuments"
        id="navUnderlineDocumentsTab"
        role="tab"
        tabindex="-1"
        >Documents</a
      >
    </li>
    <li className="dropdown nav-item">
      <a
        aria-expanded="false"
        aria-haspopup="true"
        className="dropdown-toggle nav-link"
        data-toggle="dropdown"
        href="#1"
        role="button"
      >
        Configuration
        <svg
          className="lexicon-icon lexicon-icon-caret-bottom"
          focusable="false"
          role="presentation"
        >
          <use href="/icons.svg#caret-bottom" />
        </svg>
      </a>
      <div className="dropdown-menu dropdown-menu-indicator-end">
        <a
          aria-controls="navUnderlineSetup"
          aria-selected="false"
          className="dropdown-item"
          data-toggle="tab"
          href="#navUnderlineSetup"
          id="navUnderlineSetupTab"
          role="tab"
        >
          Setup
          <span aria-hidden="true" className="dropdown-item-indicator">
            <svg
              className="lexicon-icon lexicon-icon-check"
              focusable="false"
              role="presentation"
            >
              <use href="/icons.svg#check" />
            </svg>
          </span>
        </a>
        <a
          aria-controls="navUnderlineSupportedClients"
          aria-selected="false"
          className="dropdown-item"
          data-toggle="tab"
          href="#navUnderlineSupportedClients"
          id="navUnderlineSupportedClientsTab"
          role="tab"
        >
          Supported Clients
          <span aria-hidden="true" className="dropdown-item-indicator">
            <svg
              className="lexicon-icon lexicon-icon-check"
              focusable="false"
              role="presentation"
            >
              <use href="/icons.svg#check" />
            </svg>
          </span>
        </a>
      </div>
    </li>
  </ul>
  <div className="tab-content">
    <div
      aria-labelledby="navUnderlineFieldsTab"
      className="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"
      className="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"
      className="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"
      className="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"
      className="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.

Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.

Snippet

<ul className="nav nav-tabs" role="tablist">
  <li className="nav-item">
    <button
      aria-controls="buttonFields"
      aria-selected="true"
      className="active btn btn-unstyled nav-link"
      data-target="#buttonFields"
      data-toggle="tab"
      id="buttonFieldsTab"
      role="tab"
      type="button"
    >
      Fields
    </button>
  </li>
  <li className="nav-item">
    <button
      aria-controls="buttonSettings"
      aria-selected="false"
      className="btn btn-unstyled nav-link"
      data-target="#buttonSettings"
      data-toggle="tab"
      id="buttonSettingsTab"
      role="tab"
      type="button"
    >
      Settings
    </button>
  </li>
  <li className="nav-item">
    <button
      aria-controls="buttonDocuments"
      aria-selected="false"
      className="disabled btn btn-unstyled nav-link"
      data-target="#buttonDocuments"
      data-toggle="tab"
      id="buttonDocumentsTab"
      role="tab"
      tabindex="-1"
      type="button"
    >
      Documents
    </button>
  </li>
  <li className="dropdown nav-item">
    <button
      aria-expanded="false"
      aria-haspopup="true"
      className="dropdown-toggle btn btn-unstyled nav-link"
      data-toggle="dropdown"
      type="button"
    >
      Configuration
      <svg
        className="lexicon-icon lexicon-icon-caret-button"
        focusable="false"
        role="presentation"
      >
        <use href="/icons.svg#caret-button"></use>
      </svg>
    </button>
    <ul className="dropdown-menu dropdown-menu-indicator-end">
      <li>
        <button
          aria-controls="buttonSetup"
          aria-selected="false"
          className="dropdown-item"
          data-target="#buttonSetup"
          data-toggle="tab"
          id="buttonSetupTab"
          role="tab"
          type="button"
        >
          Setup
          <span aria-hidden="true" className="dropdown-item-indicator-end">
            <svg
              className="lexicon-icon lexicon-icon-check"
              focusable="false"
              role="presentation"
            >
              <use href="/icons.svg#check"></use>
            </svg>
          </span>
        </button>
      </li>
      <li>
        <button
          aria-controls="buttonSupportedClients"
          aria-selected="false"
          className="dropdown-item"
          data-target="#buttonSupportedClients"
          data-toggle="tab"
          id="supportedClientsTab"
          role="tab"
        >
          Supported Clients
          <span aria-hidden="true" className="dropdown-item-indicator-end">
            <svg
              className="lexicon-icon lexicon-icon-check"
              focusable="false"
              role="presentation"
            >
              <use href="/icons.svg#check"></use>
            </svg>
          </span>
        </button>
      </li>
    </ul>
  </li>
</ul>
<div className="tab-content">
  <div
    aria-labelledby="buttonFieldsTab"
    className="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"
    className="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"
    className="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"
    className="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"
    className="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.

Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.

Snippet

<ul className="nav nav-justified nav-tabs" role="tablist">
  <li className="nav-item">
    <a
      aria-controls="navJustifiedFields"
      aria-selected="true"
      className="active nav-link"
      data-toggle="tab"
      href="#navJustifiedFields"
      id="navJustifiedFieldsTab"
      role="tab"
      >Fields</a
    >
  </li>
  <li className="nav-item">
    <a
      aria-controls="navJustifiedSettings"
      aria-selected="false"
      className="nav-link"
      data-toggle="tab"
      href="#navJustifiedSettings"
      id="navJustifiedSettingsTab"
      role="tab"
      >Settings</a
    >
  </li>
  <li className="nav-item">
    <a
      aria-controls="navJustifiedDocuments"
      aria-selected="false"
      className="disabled nav-link"
      data-toggle="tab"
      href="#navJustifiedDocuments"
      id="navJustifiedDocumentsTab"
      role="tab"
      tabindex="-1"
      >Documents</a
    >
  </li>
  <li className="dropdown nav-item">
    <a
      aria-expanded="false"
      aria-haspopup="true"
      className="dropdown-toggle nav-link"
      data-toggle="dropdown"
      href="#1"
      role="button"
    >
      Configuration
      <svg
        className="lexicon-icon lexicon-icon-caret-button"
        focusable="false"
        role="presentation"
      >
        <use href="/icons.svg#caret-button"></use>
      </svg>
    </a>
    <ul className="dropdown-menu dropdown-menu-indicator-end">
      <li>
        <a
          aria-controls="navJustifiedSetup"
          aria-selected="false"
          className="dropdown-item"
          data-toggle="tab"
          href="#navJustifiedSetup"
          id="navJustifiedSetupTab"
          role="tab"
        >
          Setup
          <span aria-hidden="true" className="dropdown-item-indicator-end">
            <svg
              className="lexicon-icon lexicon-icon-check"
              focusable="false"
              role="presentation"
            >
              <use href="/icons.svg#check"></use>
            </svg>
          </span>
        </a>
      </li>
      <li>
        <a
          aria-controls="navJustifiedSupportedClients"
          aria-selected="false"
          className="dropdown-item"
          data-toggle="tab"
          href="#navJustifiedSupportedClients"
          id="navJustifiedSupportedClientsTab"
          role="tab"
        >
          Supported Clients
          <span aria-hidden="true" className="dropdown-item-indicator-end">
            <svg
              className="lexicon-icon lexicon-icon-check"
              focusable="false"
              role="presentation"
            >
              <use href="/icons.svg#check"></use>
            </svg>
          </span>
        </a>
      </li>
    </ul>
  </li>
</ul>
<div className="tab-content">
  <div
    aria-labelledby="navJustifiedFieldsTab"
    className="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"
    className="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"
    className="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"
    className="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"
    className="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.

Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.

Snippet

<ul className="nav nav-tabs" role="tablist">
  <li className="col-6 col-sm-3 nav-item">
    <a
      aria-controls="navTabsGridFields"
      aria-selected="true"
      className="active nav-link"
      data-toggle="tab"
      href="#navTabsGridFields"
      id="navTabsGridFieldsTab"
      role="tab"
      >Fields</a
    >
  </li>
  <li className="col-6 col-sm-3 nav-item">
    <a
      aria-controls="navTabsGridSettings"
      aria-selected="false"
      className="nav-link"
      data-toggle="tab"
      href="#navTabsGridSettings"
      id="navTabsGridSettingsTab"
      role="tab"
      >Settings</a
    >
  </li>
  <li className="col-6 col-sm-3 nav-item">
    <a
      aria-controls="navTabsGridDocuments"
      aria-selected="false"
      className="disabled nav-link"
      data-toggle="tab"
      href="#navTabsGridDocuments"
      id="navTabsGridDocumentsTab"
      role="tab"
      tabindex="-1"
      >Documents</a
    >
  </li>
  <li className="col-6 col-sm-3 dropdown nav-item">
    <a
      aria-expanded="false"
      aria-haspopup="true"
      className="dropdown-toggle nav-link"
      data-toggle="dropdown"
      href="#1"
      role="button"
    >
      Configuration
      <svg
        className="lexicon-icon lexicon-icon-caret-bottom"
        focusable="false"
        role="presentation"
      >
        <use href="/icons.svg#caret-bottom" />
      </svg>
    </a>
    <ul className="dropdown-menu dropdown-menu-indicator-end">
      <li>
        <a
          aria-controls="navTabsGridSetup"
          aria-selected="false"
          className="dropdown-item"
          data-toggle="tab"
          href="#navTabsGridSetup"
          id="navTabsGridSetupTab"
          role="tab"
        >
          Setup
          <span aria-hidden="true" className="dropdown-item-indicator-end">
            <svg
              className="lexicon-icon lexicon-icon-check"
              focusable="false"
              role="presentation"
            >
              <use href="/icons.svg#check" />
            </svg>
          </span>
        </a>
      </li>
      <li>
        <a
          aria-controls="navTabsGridSupportedClients"
          aria-selected="false"
          className="dropdown-item"
          data-toggle="tab"
          href="#navTabsGridSupportedClients"
          id="navTabsGridSupportedClientsTab"
          role="tab"
        >
          Supported Clients
          <span aria-hidden="true" className="dropdown-item-indicator-end">
            <svg
              className="lexicon-icon lexicon-icon-check"
              focusable="false"
              role="presentation"
            >
              <use href="/icons.svg#check" />
            </svg>
          </span>
        </a>
      </li>
    </ul>
  </li>
</ul>
<div className="tab-content">
  <div
    aria-labelledby="navTabsGridFieldsTab"
    className="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"
    className="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"
    className="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"
    className="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"
    className="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

Snippet

// 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

Snippet

// 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
);

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 7:56:02 PM

Table of Contents

Default
Modern (Deprecated)
Variations
Buttons
Justified
Grid
Add Nav Underline
Classic
Styled