Short description

Tabs organise content across different screens, data sets, and other interactions. They make it easy to explore and switch between different views.

When and how to use it

Use tabs as a local navigation to organise your content in logical groupings.

Behaviour

Desktop

When the tabs overflows (exceeds) the width of the area available, all the tabs that can't fit are grouped into a list in a fold-out modal.

Mobile

If there are only two tabs, size them both 50% of the width.

When there are more tabs, use the same behaviour as for desktop. When the tabs overflow the width, present the active tab and group all others into a list in a fold-out modal.

Do's and don'ts

Do

• Use to navigate between groups of content.
• Use when users will not need to view all the sections at once.
• Align content left with the first tab
• Try to keep the tabs in low numbers, preferably fewer than four.
• Order tabs according to user needs, the first one is the one most commonly used

Don't

• Avoid using tabbed content within a tab.
• Don't use tabs to toggle data or part of a form. Use Segmented Controls for this.
• Don't use sub-headings under tab labels.
• Don't use if the user needs to read the content on all tabs to get the job done.

Tab labels

Tab labels are considered as both menu labels and sub-headings. 

Do

• Tab labels must be explicit in order to act as sub-headings themselves.

Don't

• Sub-headings should usually not be used under tabs.

Do this

Don't do this

Upper and lower case

Don’t start each word in headings and labels with upper case. Only use upper case in:

• The first letter of the first word
• The first letter of proper names
• Abbreviations

Common tab labels in overviews

On overviews, consequent and recognizable labels should be used for corresponding menu choices (tabs). These tab labels are common in overviews:

• Värde/Value – presents details about the current holding.
• Betalningar/Payments – shows upcoming, pending and historical payments. To separate different types of payments from each other, table labels may, in these cases, be used as sub-headings.
• Om kontot/About the account – shows details about the account or service, for example, connected services, interest rates, fees and preselected fund distribution. The details may also contain services such as changing the name of an account, unsubscribe to account statements or extend mortgage loans.

If applicable, the area is also included in the menu label (tab label), for example About the loans and Fund transactions.

Review

Result from the latest accessibility review of the component (Chlorophyll): 2023-04-24

• Contrast: ok
• Colour-blindness: good
• Code + aria: ok
• Touch + keyboard: so-so - select stays and space key not used
• Dark-mode: good
• Focus: so-so - hard to see 
• Reader: ok

• Details: Specification in Figma
• Instruction: How to access Figma