Tabs
Tab navigation allows users to switch between multiple sections of content within a single screen.
| Class | Type | |
|---|---|---|
tabs
|
Tabs | A class representing tabs |
Components
Tabs consist of four components:
| Class | Type | |
|---|---|---|
tabs-list
|
List | - |
tabs-item
|
Item | - |
tabs-button
|
Button | - |
tabs-button-scroll
|
Scroll |
Used when there is not enough space to display all tabs, mostly on mobile devices. The tabs-button-scroll element can be hidden by adding u-hide class to it.
|
Best Practice
In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users.
If the amount of tabs exceeds the space that is available, adding a horizontal scrolling element is recommended. The right arrow should always be visible. If the user can scroll right, the arrow is active, otherwise the arrow should be disabled. The left arrow should only visible if the user can scroll left.
