Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
Use it as a local navigation component. Each tab should contain content that is distinct from other tabs.
- Desktop: When the tabs overflows (exceeds) the width of the area available, all the tabs that can't fit are grouped into a list in a fold-out modal.
- Mobile: Only the active tab is visible. All other tabs are grouped into a list in a fold-out modal.
Do's and don'ts
- Use to navigate between groups of content.
- Try to keep the tabs in low numbers, preferabley fewer than four.
- Avoid using tabbed content within a tab.
- Don't add an icon to enhance the understanding of a label.
- Don't use tabs to toggle data or part of a form. Use Segmented Controls for this.
- Size: Depends on the tab labels, but try to have all the tabs in the same size.
- Frame: 1 px
- Background: transparent
- Margins to text: 16px