Skip to main content
🏠ComponentsTabsVersion: Next

Tabs

Tabs organize content into multiple sections and allow users to navigate between them.

Basic tabs​

A basic example with three tabs.

Item 1Item 2Item 3
<ul class="qtm-tabs">
  <li tabindex="0" class="qtm-tab qtm-active">
    <span>Item 1</span>
  </li>
  <li tabindex="0" class="qtm-tab">
    <span>Item 2</span>
  </li>
  <li tabindex="0" class="qtm-tab">
    <span>Item 3</span>
  </li>
</ul>

Sizes​

Add qtm-small or qtm-medium class to style tabs size. By default, tabs have size medium.

Item 1Item 2Item 3
<ul class="qtm-tabs qtm-small">
  ...
</ul>
Item 1Item 2Item 3
<ul class="qtm-tabs qtm-medium">
  ...
</ul>

States​

Active State​

Add qtm-active to a tab to style it as active.

Item 1Item 2Item 3
<ul class="qtm-tabs">
  <li tabindex="0" class="qtm-tab qtm-active">
    <span>Item 1</span>
  </li>
  ...
</ul>

Disabled State​

Add qtm-disabled class to tab to style it as disabled.

Item 1Item 2Item 3
<ul class="qtm-tabs">
  <li tabindex="0" class="qtm-tab qtm-disabled">
    <span>Item 1</span>
  </li>
  ...
</ul>

Divider​

By default, tabs has no a divider. Alternatively, tabs can be used with a divider by adding .qtm-has-divider class in tabs

Item 1Item 2Item 3
<ul class="qtm-tabs qtm-has-divider">
  ...
</ul>

Layout​

Use w-full if you want the tabs container to take up the whole width.

Fluid Tabs​

Use w-full fluid if you want set equal tabs widths when the tabs wrapper takes up the whole width available.

Item 1Item 2Item 3
<ul class="qtm-tabs qtm-has-divider w-full fluid">
  <li tabindex="0" class="qtm-tab qtm-active">
    <span>Item 1</span>
  </li>
  ...
</ul>

Alignment​

Tabs alignment can be set by using respectively qtm-left, qtm-center, qtm-right class.

Left alignment​

Item 1Item 2Item 3
<ul class="qtm-tabs qtm-has-divider w-full qtm-left">
  ...
</ul>

Center alignment​

Item 1Item 2Item 3
<ul class="qtm-tabs qtm-has-divider w-full qtm-center">
  ...
</ul>

Right alignment​

Item 1Item 2Item 3
<ul class="qtm-tabs qtm-has-divider qtm-w-full qtm-right">
  ...
</ul>

Scrollable tabs​

Use qtm-scrollable class to allow horizontal scrolling if needed.

<ul class="qtm-tabs qtm-has-divider w-full qtm-scrollable">
  ...
</ul>

Icons​

Left icon​

Item 1Item 2Item 3
<ul class="qtm-tabs qtm-has-divider">
  <li tabindex="0" class="qtm-tab qtm-active">
    <i class="material-icons qtm-icon">account_circle</i>
    <span>Item 1</span>
  </li>
  ...
</ul>

Right icon​

Item 1Item 1Item 1
<ul class="qtm-tabs qtm-has-divider">
  <li tabindex="0" class="qtm-tab qtm-active">
    <span>Item 1</span>
    <i class="material-icons qtm-icon">keyboard_arrow_down</i>
  </li>
  ...
</ul>

Icon only​

<ul class="qtm-tabs qtm-has-divider">
  <li tabindex="0" class="qtm-tab qtm-active">
    <i class="material-icons qtm-icon">settings</i>
  </li>
  ...
</ul>

Vertical Tab​

Use qtm-tab-vertical to allow vertical tab layout.

Item 1Item 2Item 3
<ul class="qtm-tabs qtm-has-divider qtm-tab-vertical">
  <li tabindex="0" class="qtm-tab qtm-active">
    <i class="material-icons qtm-icon">account_circle</i>
    <span>Item 1</span>
  </li>
  ...
</ul>