Tab
- Variants
- Default
- Basic
Tabbed Navigation organizes content into panels which you can navigate between. They help show related content in a small space.
Tab-Default
Usage
Be sure the content each tab reveals is related and doesn’t need to be seen at the same time as the content on another tab. When a user selects a tab, the related content appears. That content is unique and independent from what appears when the user selects other tabs. Tabs can have titles with a max character length of 45 characters and can wrap to 2 lines.
Mobile
On smaller screens tabs release their content into stacked sections, creating a long-scroll experience.
Design Specifications
Tab-Default
Best practices
Do
- Ensure the first tab is active upon page load.
- Use tabs to separate content into different views that users can select one at a time without needing to go to a new page.
- Use tabs when content or views are closely related and mutually exclusive.
- Keep tab labels brief, usually one or two words.
- Use sentence case for tab labels.
Don’t
- Use tabbed navigation as primary navigation.
- Nest multiple levels of tabbed navigation.
- Use overly long titles.
- Use tabbed navigation with unrelated content.
- Place tabbed navigation below the tabbed content.
Accessibility
- Ensure a proper intuitive programmatic focus/tabbing order exists following the visual flow.
- Ensure all controls are keyboard focusable and operable. If a custom control is used, ensure it mimics the equivalent native control’s interactions.
- Ensure labels are visible, meet contrast compliance, and accessible to screen reader users.
- Ensure state is relayed to screen reader users. Use native controls when possible. Add a role attribute when necessary.
Ensure all label states meet color/contrast requirements on Color Guidelines, and Schwab Accessibility guidelines.