Navigation
Tabs
Tabs allow users to alternate between views within the same context.
Status
Supported
Introduced
v0.20.1
Status
Supported
Introduced
v0.20.1
Interactive Demo
This demo allows you to preview the Tabs component, its variations, and configuration options.
Stories of our Times | One remarkable story, told in depth, each day. Our daily news podcast takes you to the heart of the stories that matter, with exclusive access and reporting. Published for the start of your day and hosted by Manveen Rana and David Aaronovitch.
Anatomy
Tabs contain three required elements and one optional element.
| Item | Name | Description | Component | Optional |
|---|
Options
Tabs have options that can be used to provide an appropriate experience for different use cases.
Size
There are three sizes of the Tabs; small, medium, and large. Tab label, icon, and the tab container change size. Tabs match the same height as three button sizes, to align when used together.
Icons (leading & trailing)
Icons can be displayed in Tab items and can be positioned either before (leading) or after (trailing) the label in the Tab.
Label
Labels can be displayed in Tab items. A label can give more context to what content will be displayed when a Tab is selected.
Orientation
Tabs can be displayed horizontally or vertically.
Indicator Position
The Tabs indicator position can be displayed on the bottom of the Tab for the horizontal orientation and left or right of the Tab for the vertical orientation.
Indicator Size
The size of a Tab indicator can be defined appropriately to give more or less affordance, using either: full-width of the tab, fixed-width/fixed-height (based on orientation) or a percentage of the Tab height/width (based on orientation).
Indicator Weight
The weight of a Tab indicator can be customised appropriately to give more or less affordance.
Track Weight
The weight of a Tab track can be customised appropriately to give more or less affordance.
Dividers
Dividers can be displayed in Tabs in between Tab items. Dividers in Tabs match the same width/height (depending on orientation) of the Tab items.
Distribution
- Aligns the Tab items to the left of the content area for horizontal orientation (default) and to the top for vertical orientation. The width of the Tab Group is defined by the width of its children.Start
- Spreads all Tab items across the content area, filling the entire available width or height depending on the orientation. The width of each Tab item is defined by it’s content.Grow
- Spaces each tab across the content area equally, regardless of the width or height of its children.Equal
Alignment
- Aligns the Tab item label and icons to the left.Start
- Centers the Tab item label and icons.Center
- Aligns the Tab item label and icons to the right.End
NOTE - The default alignment depends on the orientation. When Tabs are vertical it’s
Size
There are three sizes of the Tabs; small, medium, and large. Tab label, icon, and the tab container change size. Tabs match the same height as three button sizes, to align when used together.
Icons (leading & trailing)
Icons can be displayed in Tab items and can be positioned either before (leading) or after (trailing) the label in the Tab.
Label
Labels can be displayed in Tab items. A label can give more context to what content will be displayed when a Tab is selected.
Orientation
Tabs can be displayed horizontally or vertically.
Indicator Position
The Tabs indicator position can be displayed on the bottom of the Tab for the horizontal orientation and left or right of the Tab for the vertical orientation.
Indicator Size
The size of a Tab indicator can be defined appropriately to give more or less affordance, using either: full-width of the tab, fixed-width/fixed-height (based on orientation) or a percentage of the Tab height/width (based on orientation).
Indicator Weight
The weight of a Tab indicator can be customised appropriately to give more or less affordance.
Track Weight
The weight of a Tab track can be customised appropriately to give more or less affordance.
Dividers
Dividers can be displayed in Tabs in between Tab items. Dividers in Tabs match the same width/height (depending on orientation) of the Tab items.
Distribution
- Aligns the Tab items to the left of the content area for horizontal orientation (default) and to the top for vertical orientation. The width of the Tab Group is defined by the width of its children.Start
- Spreads all Tab items across the content area, filling the entire available width or height depending on the orientation. The width of each Tab item is defined by it’s content.Grow
- Spaces each tab across the content area equally, regardless of the width or height of its children.Equal
Alignment
- Aligns the Tab item label and icons to the left.Start
- Centers the Tab item label and icons.Center
- Aligns the Tab item label and icons to the right.End
NOTE - The default alignment depends on the orientation. When Tabs are vertical it’s
States
Tab items have states including, base, hover, active, disabled, and focus. They can be displayed with both, base or selected. By default, Tabs have one Tab item in a selected state.
Base
Tab items have a base state. This is the base style of the Tab item before it has been interacted with by a user.
Hover
Tab items have a hover state. The style of the Tab item changes to visually communicate and provide feedback to the user that the Tab item is an interactive element.
Active
Tab items have an active state. The style of the Tab item changes to visually communicate and provide feedback to the user that the Tab item has been interacted with.
Selected
Tab items have a selected state. The style of the Tab item changes to visually communicate and provide feedback to the user that the Tab item has been selected.
Disabled
Tab items in a disabled state communicate that a Tab item exists, but is not available to the user in that scenario. When the user’s cursor hovers over a Tab item in a disabled state, the cursor shows as not-allowed. Disabled tab items are often used to maintain layout consistency and communicate that a Tab item may become available if another condition has been met.
Focus
Tab items in a focus state communicate that a user has highlighted a Tab item, using an input method such as a keyboard or voice.
Behaviours
The following guidance describes how Tabs behave.
Animation
When the user selects a Tab item, the indicator slides along the track of the Tabs to the newly selected Tab item. At the time of selection, the Tabs content changes immediately.
Selected
Only one tab item can be selected at any given time. This property changes an individual tab item’s selected state.
Tabs Overflow
When there are too many Tabs to fit horizontally across the viewport, a Scroll component is applied. On a desktop, the controls (buttons) are rendered on the scroll.
Label Overflow Wrap
When the label in a Tab item is too long for the available horizontal space, it wraps to form another line.
Animation
When the user selects a Tab item, the indicator slides along the track of the Tabs to the newly selected Tab item. At the time of selection, the Tabs content changes immediately.
Selected
Only one tab item can be selected at any given time. This property changes an individual tab item’s selected state.
Tabs Overflow
When there are too many Tabs to fit horizontally across the viewport, a Scroll component is applied. On a desktop, the controls (buttons) are rendered on the scroll.
Label Overflow Wrap
When the label in a Tab item is too long for the available horizontal space, it wraps to form another line.
Usage
The following guidance describes how and when to appropriately use a Tab component.
Do
Use tabs to alternate between views within the same context.
Don’t
Avoid using Tabs to navigate to different pages and anchoring to different sections on a page. A Navigation component is a more appropriate component for this purpose.
Do
Use Tabs when users have two or more content views to choose from.
Don’t
Avoid using Tabs when there are more than five or more content views to choose from. Consider using an alternative component such as a Selector to reduce the users cognitive load.
Do
All Tab items should be consistent in size e.g. small, medium or large Tab item. This is to ensure Tab items have equal importance.
Don’t
Don’t mix Tab items that include an icon or don’t include an icon. This is to ensure Tab items have equal importance.
Do
Tab labels should be in sentence case. This helps with scannability and legibility.
Don’t
Tab labels shouldnt be truncated. Keep it short, clear, and fully visible.
Do
Tabs should be in close proximity to the content it’s changing.
Don’t
Avoid nesting Tabs to prevent usability issues. Consider using an alternative component such as an Accordion or rethink the page structure.
Do
The Tab shouldn’t fall out of view of the content. If the content is too large to display with the Tabs in the same viewport, then ensure the Tabs become fixed (sticky).
Do
Tabs in the vertical orientation should be used when horizontal space is less generous and when the list of sections is greater than can be presented to the user in a horizontal format.
Accessibility Considerations
Tabs implement the latest WAI-ARIA Tabs specifications.
| Order | Element | Role |
|---|
Scroll controls are not focussable.
| Command | Description |
|---|
| Element | Attribute | Value | Description | User Supplied |
|---|
Note
By default, ariaLabel will match the Tab text label. Where a Tab item text label is not visible on the screen I.E. if there is only an icon in a Tab item, a string should be parsed to the title prop on the icon.
SEO Considerations
Ensure icons have Alt Text applied.
API
Tabs have a range of props that can be used to define an appropriate experience for different use cases.
Tabs have a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
To support resizing of the selected tab indicator this component uses the ResizeObserver API this is not supported in Internet explorer, if you require support we suggest you add a pollyfill to your application.
A Tab has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
Compliance
All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.
| Feature | Description | Status |
|---|