Using this Component
Tabs are used to navigate between different content views on the same page.
For primary tabs on a page. Used to change all content on the page below the tabs.
For secondary tabs on a page, or where horizontal tabs are infeasible due to page layout.
Tabs allow for added depth and specificity to page content. When tabs reflect varied content, the leftmost tab should often be used as an “Overview” tab that contains snippets from, and links to the other tabs.
All tabs have a text label which should be kept as concise as possible. To add a more detailed label, a tooltip can be added that will appear on hover over the tab. Labels should briefly accurately describe the page content within that tab.
For a view controller that only impacts a particular section of a page, consider using a UISegmentedController.
1. Tab Label
Tabs have a text label. Text is centered within the tab.
2. Tab Number
All tabs can have an optional number appended to the label. Tab numbers appear in a lighter text color than the label. Numbers should be applied to a tab label when the content is both quantifiable and meaningful to the user.
3. Selection Highlight
In addition to changing the label text style, a selected tab also displays a selection highlight along the tab bar beneath/beside the selected tab.
4. Tab Bar
For horizontal tabs, the tab bar runs beneath the tab labels for the full width of the tabbed section.
For vertical tabs, the tab bar runs along the left edge of the tab labels, but not beyond the lowermost label.
Tabs can trigger a tooltip. By default, this happens when tabs truncate, but this tooltip can be overridden with custom content to serve as an extra label or description of the tab. Additionally, they are often used to explain why a tab is disabled.
Tabs are directly interactive elements that show the user what view is currently presented, and reflect this state using label and highlight styling.
One tab must be selected at all times. Clicking anywhere on an unselected tab will change the view to the clicked tab. Clicking on an already selected tab has no impact.
When navigating to a page, the leftmost tab (for horizontal) or topmost tab (for vertical) is selected by default.
Width & Alignment
Horizontal tabs have a maximum width of 175px, but may scale downward depending on browser width. When all tabs can be viewed simultaneously at max width, they are left-aligned along the tab bar. When that is not possible, all tabs widths are scaled down equally to fit.
Vertical tabs have a fixed height for each tab, and their height does not scale based on browser resizing.
When a tab becomes too narrow to display the full label text, the label is truncated with an ellipsis (“…”). When truncated, the full tab label is displayed in a tooltip. Custom tooltip content overrides the display of truncation tooltips.
Tooltips are displayed on hover over a tab, when applicable.
Tab Order & Number
The number and order of tabs is determined during implementation. Tabs are not extensible or rearrangeable by users.
Component code details are not currently available on this site, but we're working on it!
Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.