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>