For Designer

Components/Navigation

Tab Menu

Tab menus switch between related views or sections of a page, without sending people somewhere else

Variants
29
Base items
18
Types
4

Playground

Pick a type, then click the tabs or use the arrow keys to move between them

Line-tabs · Quantity=03

Types

Four sets, one job each. Pick by where the tabs sit and how much they need to stand out

Line-tabs
Page sections and settings, 2–6 tabs on a stroke/sub-300 base line
Segmented-tabs
Switch views of the same data, like a list and a grid
Pill-tabs
Filters and categories that sit above content
Tab-menu-vertical

Menu

Side navigation for settings and long forms, Card or List

States

Every type has Default, Hover and Active. The second tab shows hover, the first is active

Line
Segmented
Pill
Vertical

Menu

Icon and badge

Each base item can show a leading icon and a count badge. Use the icon for every tab or none, and the badge only for counts that need attention

Icon
Badge

When to use

Use when

  1. Content splits into a few peer views that people switch between
  2. People stay on the same page, only the panel below changes
  3. Labels are short and the views make sense in any order

Avoid when

  1. The views must happen in order, use a Stepper
  2. The sections are separate pages with their own address, use the side navigation
  3. There are more than six options, use a Dropdown

Do and don’t

Do

Keep labels to one or two words and the same kind of word, so tabs scan as a set

Don’t

Don’t mix tab types in one place or nest tabs inside tabs

Tokens and specs

PropertyTokenValue
Tab text—Inter Medium 14/20, −0.6%
Text, default#5C5C5C
Text, hover#171717
Line, active text and underline#1868D0
Line, base line#DEDEDE
Line, underline—3 px, 10 px below the tab
Line, gap and item padding—16 / 4 px
Segmented, track#F7F7F7
Segmented, active tab#FFFFFF
Segmented, active shadow0 16 32 −12, #0E121B 10%
Segmented and Pill, tab height—36 px, 8 / 12 padding
Pill, filled active#262626
Pill, outline#EBEBEB
Pill, gap8 px
Rounded radius999 px, 12 px when false
Vertical, width—217 px
Vertical, active#F7F7F7 / #EBEBEB
Vertical, titleInter Medium 12/16
BadgeInter Medium 10/12, 16 px high
Esc