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, Tabs will handle automatically the active tab item based on user interaction thanks to the enableAutoActive prop set by default to true.

All tab items and submenu items must have an id attribute for the features to work properly.

Basic tabs​

A basic example with three tabs.

<QtmTabs activeId="tab-item-1">
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

Sizes​

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

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

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.

<QtmTabs enableAutoActive={false}>
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2" active></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

activeId​

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

<QtmTabs activeId="tab-item-2">
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

Disabled State​

Add disabled attribute to tab to style it as disabled.

<QtmTabs>
  <QtmTab id="tab-item-1" label="Item 1" disabled></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

Divider​

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

<QtmTabs divider={false}>
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

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.

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

Alignment​

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

Left alignment​

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

Center alignment​

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

Right alignment​

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

Scrollable tabs​

Use scrollHorizontally to allow horizontal scrolling if needed.

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

Icons​

Tab labels may be either all icons or all text.

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

Icon position​

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

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

Vertical Tab​

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

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

Customization​

A Tab can also take any content in their slot.

Item 1Item 2Item 3
<QtmTabs activeId="tab-item-1">
  <QtmTab id="tab-item-1">
    <QtmIcon icon="settings" />
    <QtmTypography classes="text-green-500">Item 1</QtmTypography>
  </QtmTab>
  <QtmTab id="tab-item-2">
    <QtmIcon icon="account_circle" />
    <QtmTypography classes="text-red-500">Item 2</QtmTypography>
  </QtmTab>
  <QtmTab id="tab-item-3">
    <QtmIcon icon="face" />
    <QtmTypography classes="text-primary-500">Item 3</QtmTypography>
  </QtmTab>
</QtmTabs>

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