Tabs

Tabs organise and allow users to move between content without having to navigate away from a page.

When to use

Use tabs when you are organisazing related content in a single cointainer or need to flip between multiple panes or sections. It’s a way to group content, connect related information, and is used as a tool to save space.

Alternatives and related components

Use anchor navigation on longer pages with multiple sub-headings when you don’t group the content into groups.

Anatomy

Tabs consists of:

1. Label: describes the content contained within it.
2. Line: this line shows the state of a tab
3. Trailing icon: this icon shows that it is possible to view all tabs that are not visible on the screen
4. Container

(Interactive) states

Tabs contains the states active, inactive, hover, disabled and focus.

Design properties

Typography

• Label inactive: TheSans/md/400
• Label active: TheSans/md/700

Color

• Label inactive: text color Grey/4
• Label active: text color Blue/3
• Line inactive: fill color Grey/2
• Line active: fill color Blue/3

Interactive states

• Hover inactive: label color Blue/3, line color Grey/2
• Disabled: label color Grey/2, line color Grey/2
• Focus: border color Ocher/5, line color Grey/2

Structure

• Label: padding-top and padding bottom 8px, padding-left and padding-right 16px
• Line: width 2px, padding-top 8px
• Trailing icon: size 16px, padding-left 4px

Mobile

• Label (and trailing icon): centered

Accessibility

• Tab, shift + tab - to move focus between tabs.
• Space or Enter - to display the selected tab's content

Content guidelines

Order the tabs by priority or importance from left to right

Labels

• Each tab label needs to describe the content contained within it.
• Keep tab labels short and meaningful. Between 1-2 words is best and written in plain language. Keep in mind that at mobile widths and during translation, the character length of a label will impact the experience.
• Ensure that each tab label is unique.
• Do not use icons in tab labels.
• Tab labels shouldn't be longer than one or two words and be accurate in their description.
• Tab labels should also make sense when read in isolation.
• Never truncate tab labels. If a label overruns the container, find a shorter alternative.
• Do use title case for tab labels.

Best practices

Dos

Tabs should:

• As a default, there must always be one tab that's already selected and the content panel below it must be visible.
• Always be placed above the content it relates to.
• Have a minimum number of 2 tabs.
• Only one content panel can be shown at a time.
• Have the same font size for the label text of each tab
• Have one line of text for labels.
• Have an order that should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.

Don’ts

Tabs should:

• Not be putted underneath the content it relates to.
• The order of the tabs from left to right should never change. Only the content panel should change.
• Not use two lines of text for labels.
• Not use no more than six tabs in most scenarios. This maintains an uncluttered UI and reduces cognitive load for users.
• Not be used for primary navigation.

Behavior

• The first tab section is selected by default
• Only one tab can be selected at a time
• Currently selected tab is always highlighted
• Tabs are scrollable by default and do not wrap to a second line

References

https://www.bbc.co.uk/gel/guidelines/tabs https://www.carbondesignsystem.com/components/tabs/usage https://www.freshconsulting.com/insights/blog/uiux-principle-21-when-and-when-not-to-use-tabs/