Short description

The tab navigation is tied to the main navigation structure and organises the content. 

When and how to use it?

Use the tab navigation organise groups of content at the same level of hierarchy. Each tab should contain content that is distinct from other tabs.

Behaviour

The tabs have the same design and functionality in all devices. If there are too many tabs for the page, there will be a horizontal scrolling in the tab navigation area. A white shadow will appear which makes it look like it's fading out to the side. You can swipe the navigation to see more tabs.

Desktop

Tablet

Mobile

Do's and don'ts

• Use tab navigations to navigate between groups of content.
• Try to kep the number of tabs low, preferably fewer than four.
• Summarize the content in a good way, ask a copywriter for advice.

• Don't add an icon to enhance the understanding of a label.
• Don't use sub-headings under tab labels.

Examples

Desktop example

Tablet example

Mobile example

Measurements

• Height: 48 px
• Width: No min. or max. width
• Underline: 4 px
• Margins to text: 16 px

States

Normal

• Background: Transparent
• Text: 16 px, regular, Primary (Base 800)

Hover

• Background: Transparent
• Text: 16 px, regular, Primary (Base 800)
• Underline: Green

Focus

• Background: Transparent
• Text: 16 px, regular, Primary (Base 800)
• Border: Focus Shadow (Blue)

Active

• Background: Transparent
• Text: 16 px, medium, Primary (Base 800)
• Underline: Dark Green 2

Colours

• Green
• Dark green 2
• Grey 800
• Blue