Tabs

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

Basic tabs

A basic example with three tabs.

• Item 1
• Item 2
• Item 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 1
• Item 2
• Item 3

<ul class="qtm-tabs qtm-small">
  ...
</ul>

• Item 1
• Item 2
• Item 3

<ul class="qtm-tabs qtm-medium">
  ...
</ul>

States

Active State

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

• Item 1
• Item 2
• Item 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 1
• Item 2
• Item 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 1
• Item 2
• Item 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 1
• Item 2
• Item 3

<ul class="qtm-tabs qtm-has-divider qtm-fluid qtm-w-full">
  <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 1
• Item 2
• Item 3

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

Center alignment

• Item 1
• Item 2
• Item 3

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

Right alignment

• Item 1
• Item 2
• Item 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.

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7

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

Icons

Left icon

• account_circleItem 1
• account_circleItem 2
• account_circleItem 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 1keyboard_arrow_down
• Item 2keyboard_arrow_down
• Item 3keyboard_arrow_down

<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

• settings
• settings
• settings

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

• account_circleItem 1
• account_circleItem 2
• account_circleItem 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>