Tabs
Overview#
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. Each tab governs the visibility of one group of content.
Design Guidelines#
Use when#
- There is a need to alternate among related views within the same context.
- Multiple related tasks would otherwise cause undue scrolling or make a single page overwhelming to the user.
Don't Use When#
- For primary navigation.
- Content is dissimilar.
- Related tasks can be completed on one page without overwhelming the user.
Visual Style#
- Always use the default component style.
- Tab labels appear in a single row.
- The width of each tab is defined by the length of its text label.
- Keep padding consistent on each tab.
Behaviour#
- All content changes must be saved at the page level.
- Users may switch between tabs with unsaved content, but must perform a page-level save before leaving the page. If not, all unsaved content will be lost.
- Use the alert component to notify user if they attempt to leave the page with unsaved content.
- Changes to content will persist if user switches to another tab (content does not persist if user refreshes or navigates away from the page).
- Tabs control the UI region displayed below them.
Editorial#
Labels#
- Use tab labels that set clear expectations about the type of content within each tab.
- Do not use punctuation or icons for labels.
- Keep tab labels short (no more than 3 words if possible).
Content#
- Prioritize content so the user knows what to do first.
- Content should relate to the tab label and consist an item or cohesive set of items.
- Write in sentence case (capitalize the first word and proper nouns only).