Skip to main content
HomeComponentsTabs
warning
This is a beta release of the Quantum web libraries
Please be careful when using them in production, as they may contain bugs, unstable breaking changes, and incomplete features.
Go to the latest version

Tabs

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

info

By default, a Tabs will handle automatically the active tab based on user interaction thanks to the enableAutoActive prop set by default to true.

For the automatic activation to function correctly, all tab items must have an id attribute for the features to work properly.

Basic tabs​

A basic example with three tabs.

<qtm-tabs activeId="tab-item-1">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Sizes​

Set size attribute to small or medium to style tabs size. By default, tabs have size medium.

<qtm-tabs activeId="tab-item-1" size="small">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>
<qtm-tabs activeId="tab-item-1" size="medium">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Managing items​

All the props listed below can be applied directly to the Tabs component.

info

All tab item elements must have an id for the features to work properly.

enableAutoActive​

Setting the enableAutoActive prop to true (default value) will automatically activate the active state of tab menu items when they are clicked or when the activeId prop value has changed.

On the other hand, setting it to false will require manual management of the active state.

<qtm-tabs enableAutoActive="false">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

activeId​

Set the activeId value to the active tab item id by default.

<qtm-tabs activeId="tab-item-2">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Disabled State​

Add disabled attribute to tab to style it as disabled.

<qtm-tabs>
  <qtm-tab id="tab-item-1" label="Item 1" disabled></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Divider​

By default, tabs has a divider. Alternatively, tabs can be used without a divider by setting divider to false.

<qtm-tab divider="false">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Layout​

  • fullWidth attribute if you want the tabs container to take up the whole width.
  • fullHeight attribute if you want the tabs container to take up the whole height.

Fluid Tabs​

Add fullWidth and fluid to Tabs if you want set equal tabs widths when the tabs wrapper takes up the whole width available.

<qtm-tabs activeId="tab-item-1" fullWidth fluid>
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Alignment​

Tabs alignment can be set by setting alignment attribute to left, center, right.

Left alignment​

<qtm-tabs activeId="tab-item-1" fullWidth alignment="left">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Center alignment​

<qtm-tabs activeId="tab-item-1" fullWidth alignment="center">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Right alignment​

<qtm-tabs activeId="tab-item-1" fullWidth alignment="right">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Scrollable tabs​

Use scrollHorizontally to allow horizontal scrolling if needed.

<qtm-tabs activeId="tab-item-1" scrollHorizontally fullWidth>
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
  <qtm-tab id="tab-item-4" label="Item 4"></qtm-tab>
  <qtm-tab id="tab-item-5" label="Item 5"></qtm-tab>
  <qtm-tab id="tab-item-6" label="Item 6"></qtm-tab>
  <qtm-tab id="tab-item-7" label="Item 7"></qtm-tab>
</qtm-tabs>

Icons​

Tab labels may be either all icons or all text.

<qtm-tabs activeId="tab-item-1">
  <qtm-tab id="tab-item-1" icon="settings"></qtm-tab>
  <qtm-tab id="tab-item-2" icon="account_circle"></qtm-tab>
  <qtm-tab id="tab-item-3" icon="face"></qtm-tab>
</qtm-tabs>
<qtm-tabs activeId="tab-item-1">
  <qtm-tab id="tab-item-1" icon="settings" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" icon="account_circle" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" icon="face" label="Item 3"></qtm-tab>
</qtm-tabs>

Icon position​

By default, the icon is positioned at the start of a tab. Other supported position is end.

<qtm-tabs activeId="tab-item-1">
  <qtm-tab id="tab-item-1" icon="settings" label="Item 1" iconPosition="start"></qtm-tab>
  <qtm-tab id="tab-item-2" icon="account_circle" label="Item 2" iconPosition="end"></qtm-tab>
  <qtm-tab id="tab-item-3" icon="face" label="Item 3"></qtm-tab>
</qtm-tabs>

Vertical Tab​

Set tabItemDirection attribute to horizontal or vertical to allow horizontal/vertical tab layout.

<qtm-tabs activeId="tab-item-1" tabItemDirection="vertical">
  <qtm-tab id="tab-item-1" icon="settings" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" icon="account_circle" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" icon="face" label="Item 3"></qtm-tab>
</qtm-tabs>

Customization​

A Tab can also take any content in their slot.

Item 1Item 2Item 3
<qtm-tabs activeId="tab-item-1">
  <qtm-tab id="tab-item-1">
    <qtm-icon icon="settings" />
    <qtm-typography classes="text-green-500">Item 1</qtm-typography>
  </qtm-tab>
  <qtm-tab id="tab-item-2">
    <qtm-icon icon="account_circle" />
    <qtm-typography classes="text-red-500">Item 2</qtm-typography>
  </qtm-tab>
  <qtm-tab id="tab-item-3">
    <qtm-icon icon="face" />
    <qtm-typography classes="text-primary-500">Item 3</qtm-typography>
  </qtm-tab>
</qtm-tabs>

API​

Tab​

Loading API documentation...

Tabs​

Loading API documentation...

Spotted a bug, have a question, or want to suggest a new feature?

Submit an issue on GitLab