Components / Atoms

Tabs

Tabs are used to organize content by grouping similar information on the same page.

The <u-tabs> and <u-tab> components include the recommended ARIA attributes for accessibility and provides full keyboard navigation control of the tabs.

Default#

States#

Align#

Position#

Top (Default)
Bottom
Left
Right

Scrolling#

Horizontal
Vertical

Custom Tab label#

Tones & Variants#

Sizes#

Extra Small
Small
Medium
Large

Advanced#

v-model Support#

Use the <u-tabs> v-model to control which tab is active by setting the v-model to the index (zero-based) of the tab to be shown.

Current Index: 1

Dynamic Tabs#

There are no open tabs
Open a new tab using the + button above.

API#

Coming Soon