The Tabs component is used for hiding content behind a selectable item. This can also be used as a pseudo-navigation for a page, where the tabs are links and the tab-items are the content.



Below is a collection of simple to complex examples.

Fixed Tabs

The fixed-tabs prop forces tab to take up all available space up to the maximum width (300px).

Centered Active

Active tab is always centered.


The grow prop will make the tab items take up all available space up to a maximum width of 300px.


Tabs can be toggled to stack its v-tab components vertically.


Tabs can contain icons as well as text. This increases their height to 72px.


You can use them inside AppBar’s extension slot.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Last Updated: 2021-09-02