Newskit Logo
About

Navigation

Tabs

Tabs allow users to alternate between views within the same context.

Status

Supported

Introduced

v0.20.1
View code

Status

Supported

Introduced

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.

Distribution
Size
Space Inline
Tab Bar Track Weight
Tab Bar Indicator Weight
Tab Bar Indicator size
Style preset overrides
divider
vertical
Align
Indicator Position
import React from 'react';
import { Tabs } from 'newskit';

export default () => (
  <Tabs
    distribution="start"
    size="medium"
    overrides={{
      selectionIndicator: { track: {}, indicator: {} },
    }}
    initialSelectedIndex={0}
    align="center"
    indicatorPosition="end"
  />
);

Anatomy

Tabs contain three required elements and one optional element.

Card Media
ItemNameDescriptionComponentOptional
1
TabIncludes a label, icon
Text
2
TabsIncludes a list of TabsTabs
3
Tabs BarIncludes indicator and trackBlock
4
DividerDividers between each TabDivider
5
Tab PanelContains the elements of the Tab contentBlock

Options

Tabs have options that can be used to provide an appropriate experience for different use cases.

Card Media

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.

Card Media

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.

Card Media

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.

Card Media

Orientation

Tabs can be displayed horizontally or vertically.

Card Media

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.

Card Media

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).

Card Media

Indicator Weight

The weight of a Tab indicator can be customised appropriately to give more or less affordance.

Card Media

Track Weight

The weight of a Tab track can be customised appropriately to give more or less affordance.

Card Media

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.

Card Media

Distribution

  • Start
    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.

  • Grow
    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.

  • Equal
    Spaces each tab across the content area equally, regardless of the width or height of its children.

Card Media

Alignment

  • Start
    Aligns the Tab item label and icons to the left.

  • Center
    Centers the Tab item label and icons.

  • End
    Aligns the Tab item label and icons to the right.

NOTE - The default alignment depends on the orientation. When Tabs are vertical it’s

Start
and when Tabs are horizontal it’s
Center
.

Card Media

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.

Card Media

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.

Card Media

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.

Card Media

Orientation

Tabs can be displayed horizontally or vertically.

Card Media

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.

Card Media

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).

Card Media

Indicator Weight

The weight of a Tab indicator can be customised appropriately to give more or less affordance.

Card Media

Track Weight

The weight of a Tab track can be customised appropriately to give more or less affordance.

Card Media

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.

Card Media

Distribution

  • Start
    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.

  • Grow
    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.

  • Equal
    Spaces each tab across the content area equally, regardless of the width or height of its children.

Card Media

Alignment

  • Start
    Aligns the Tab item label and icons to the left.

  • Center
    Centers the Tab item label and icons.

  • End
    Aligns the Tab item label and icons to the right.

NOTE - The default alignment depends on the orientation. When Tabs are vertical it’s

Start
and when Tabs are horizontal it’s
Center
.

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.

Card Media

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.

Card Media

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.

Card Media

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.

Card Media

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.

Card Media

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.

Card Media

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.

Card Media

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.

Card Media

Selected

Only one tab item can be selected at any given time. This property changes an individual tab item’s selected state.

Card Media

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.

Card Media

Label Overflow Wrap

When the label in a Tab item is too long for the available horizontal space, it wraps to form another line.

Card Media

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.

Card Media

Selected

Only one tab item can be selected at any given time. This property changes an individual tab item’s selected state.

Card Media

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.

Card Media

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.

src alt

Do

Use tabs to alternate between views within the same context.

src alt

Do not

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.

src alt

Do

Use Tabs when users have two or more content views to choose from.

src alt

Do not

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.

src alt

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.

src alt

Do not

Don’t mix Tab items that include an icon or don’t include an icon. This is to ensure Tab items have equal importance.

src alt

Do

Tab labels should be in sentence case. This helps with scannability and legibility.

src alt

Do not

Tab labels shouldnt be truncated. Keep it short, clear, and fully visible.

src alt

Do

Tabs should be in close proximity to the content it’s changing.

src alt

Do not

Avoid nesting Tabs to prevent usability issues. Consider using an alternative component such as an Accordion or rethink the page structure.

src alt

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).

src alt

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.

Focus order
OrderElementRole
1
tabFocusses to the first Tab Item in a Tab list.
2
tabPanelFocusses to the Tab Panel.
Keyboard Interactions
CommandDescription
Tab
When focus is outside of the Tab list it moves focus to the active Tab. If focus is on the active Tab it moves focus to the next element in the keyboard focus Tabs associated Tab panel.
Rtn
Activates the Tab if it was not activated automatically on focus.
Left
Focuses and activates the previous Tab in the tab list when the Tabs orientation is horizontal. If the current tab is the first tab in the tab list it activates the last tab.
Right
Focuses and activates the next Tab in the Tab list when the Tabs orientation is horizontal. If the current tab is the last tab in the tab list it activates the first tab.
Up
Focuses and activates the previous Tab in the tab list when the Tabs orientation is vertical. If the current tab is the first tab in the tab list it activates the last tab.
Down
Focuses and activates the next Tab in the Tab list when the Tabs orientation is vertical. If the current tab is the last tab in the tab list it activates the first tab.
Home
Focuses activates the first Tab in the Tab list.
End
Focuses activates the last Tab in the Tab list.
WAI-ARIA
ElementAttributeValueDescriptionUser Supplied
tab

arialabel

Aria-label attribute is used to define a string that labels the action that will be performed when the user interacts with a Tab Item in a Tabs. Example: ariaLabel="view component overrides”
tab

aria-selected

“true” or “false”

Aria-selected is used to indicate the currently selected tab
tab

aria-controls

auto-generated

Maintains a reference from the tab to the associated panel
tab

aria-hidden

“true”

Hides the Tab Bar Indicator from screenreaders.
tab

aria-labelledby

auto-generated

Maintains a reference from the tab to the associated panel
tab

role

“tabpanel”

ARIA Tab role indicates an interactive element inside a Tab Group that, when activated, displays its associated Tab Panel
tab

aria-orientation

“horizontal” or “vertical”

Describes the orientation of the tabs

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

Tabs have a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
children

React.ReactNode

An array of Tab components.
vertical

boolean

false

If true, changes the orientation to vertical.
distribution

"start"

"grow"

"equal"

TabsDistribution.start

Defines the distribution of the Tabs.
align

"start"

"end"

"center"

Tab.Align.Start

Defines the alignment of the Tabs.
divider

boolean

false

If true, renders a divider component between Tab items in a Tab list.
initialSelectedIndex

number

0

Defines the index of the initially selected Tab item.
Tab

A Tab has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
children

React.ReactNode

Content rendered inside the Tab Panel.
label

React.ReactNode

Label of the Tab item.
ariaLabel

string

label

Defines the aria-label attribute of the Tab item.
disabled

boolean

false

If true, renders a Tab in a disabled state.

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.

FeatureDescriptionStatus
VariationsRelevant variations (style, size, orientation etc.)
Interactive statesAll interactive states that are applicable (hover, active, focus, focus, disabled, error etc).
Defined behavioursGuidelines for layout, animation, interactions, etc.
Usage guidelinesIncludes a list of dos and don’ts that highlight best practices and common mistakes to avoid.
Accessibility guidelinesFollows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA.
SEO guidelinesConforms to best practice SEO techniques. SEO considerations defined.
PropsDetails of component properties - their name, type, options, default, whether it’s required and their description have been defined.
Technical performance considerationsDetails on how this component may impact performance.
Available in UI kitIncluded within Figma Web Gallery file.
Design specificationsDetailed design specification including sizing, spacing and design tokens defined.
ThemesDisplays correctly across light and dark themes.

Need Help?

Cant find what you are looking for?

Cant find what you are looking for?