Live Demo
Tab content for Home
Tab content for Profile
Tab content for Contact
Anatomy
- Active Tab Item
- Other Tab Item
- Base Stick
- Tab Group
Layout
- Padding top: 4
- Padding bottom: 4
- Individual item spacing: 20px
States
Tab items have four states available – enabled, hovered, active and disabled. When a tab item is active the container displays the content for that tab. Only one tab item within a tab group can be active.
- Active Tab Item
- Hover
- Pressed
- Disabled
Type
Tabs can be displayed in four variations.
- Active
- Inline
- Stacked
- Icon True
Guidelines
- Avoid placing a tab group inside another tab group.
- Ensure a clear connection between tabs and their respective content by distinctly separating the container.
- For sequential content, opt for steps instead of tabs.
- Keep tab labels brief, adhering to the writing guidelines.
- Do not use punctuation in tab labels.
- Refrain from truncating tab labels.
Tabs make the most sense when there are at least two sections.
Do not use only tabs for only one section. Use Navigation bars with Large or Small Title variants.
Only one section of the tab can be active at a time.
Two sections can not be active at once.