Tabs

Tabs organize content by grouping similar information into containers that are shown and hidden through navigation.

Also known as:
Tab listTab groupTab panelSection tabsNav barVertical tabsHorizontal tabs

AnchorNeed to know

  • Navigation tabs are always used for global navigation at the top of the page or inside an offscreen menu on small screens.
  • Section tabs are used for chunking content, allowing movement between content within a single section of a page.

Visuals

UI Kit

Options

  • Navigation tabs and Section tabs:
    • Navigation tabs are always used for global navigation at the top of the page or inside an offscreen menu on small screens. Navigation tabs navigate to unrelated content.
    • Section tabs are used for chunking content, allowing movement between content within a single section of a page. Each section tab's content is similar and closely related to each other tab.
  • Vertical tabs and horizontal tabs are used for establishing hierarchy as appropriate for the product area.
  • Default and reversed

To keep in mind

Anatomy

  • Tab list: This refers to the container holding each of the tab items.
  • Selected tab: The current, active tab. One tab—and only one tab—is always selected for a given tab list.
  • Unselected tab: The other available tabs.
  • Tab item:
    • A tab item contains: a large clickable target area, a label, a selected tab indicator (when the tab is selected), and optional metadata.
    • Tab link: The large clickable area of the tab item uses a link to navigate to that tab's content.
    • Tab label: The label describes what content will be displayed. Use 1 short noun or noun phrase.
    • Selected tab indicator: This contains a selected tab indicator to show that the tab is current.
    • Optional metadata: You might display 1 item of metadata, such as a Badge to bring data forward from the content in that section or a Tag to add supplementary information, such as "New".
  • Tab content: The content that lives "inside" a tab and is revealed when that tab item is selected.
  • Separator: To separate tabs from content, use whitespace or the edge of another component, such as Title Blocks or Cards, not a Divider.

Styling

  • Align navigation tabs and section tabs left (in left-to-right languages) and never center within a page or section.
  • For small screens, tab items must adhere to WCAG Success Criterion 1.4.10: Reflow. For navigation tabs on small screens, we use a hamburger menu and offscreen navigation to present tabs vertically. For section tabs on small screens, a user can scroll horizontally. For touch devices (large or small), a user may drag section tabs to reveal more offscreen tab items.
  • Never use icons in section tabs. If we need icons for navigation tabs on small screens, we might use stacked icons above labels. We avoid icons in section tabs to reduce tab width, which is important for localization and small screens, and to avoid overburdening a tab item that might already have a badge as optional metadata.
  • Tab content always appears below horizontal tabs.
  • Tab content always appears to the right of vertical tabs in left-to-right languages (and to the left of vertical tabs in right-to-left languages).
  • Use a single row of tabs without wrapping and without showing multiple rows.

Tab content and ordering

  • Aim for 3–6 tab items. If you only have 2 tabs, consider using something else.
  • The first tab is selected by default. The default tab is most important use case of the page.
  • Use smart defaults for defining tabs that accelerate users to the content they care about most. For example, you might surface the most common pathway or personalized content, such as the current user's saved comments.
  • Avoid tabs that you can "toggle off". That is, 1 tab is always selected.
  • To decide how to chunk content into different tabs, consider a card sorting activity.

Navigation

  • A user can navigate between tabs to reveal that tab's content by clicking or tapping on the tab item. We don't support swiping between sections using the tab content area (for example, using edge swipes on mobile devices).

Labels

  • Don't truncate long tab text. Use short tab label text, and if it absolutely must be longer, consider wrapping the text instead of truncating.

Fixed or scrolling

  • Use fixed tabs of equal width for a small number of tab items (e.g. 3) that fit inside 320px containers or viewports.
  • Use scrolling section tabs of flexible width for all other tabs. That is, you can scroll them horizontally to see more tabs offscreen.

Overflow

  • Consider providing an action next to the tabs to access additional tabs that do not fit on screen. For example, you might use an adjacent menu list.

Tabs with no content

Right-To-Left (RTL)

  • Reverse tab order for right-to-left languages.

Hierarchy

  • Don't place tabs inside tabs. Avoid nesting multiple levels of tabs in one orientation.

When to use and when not to use

When to use
  • Use tabs when you have too much content to show at once. Use them to reduce cognitive load and allow users to progressively disclose the content they're interested in.
  • Use tabs for pre-defined chunks of content that users can navigate between.
When not to use
  • Avoid tabs when the items perform an action. Instead, use a Button or Button group.
  • Avoid tabs when you have more than 6 sections. Instead, consider using a Collapsible.
  • Avoid tabs when each tab or most tabs have limited content. Consider showing it all at once.
  • Avoid tabs when a user needs to see content from multiple tabs at the same time.

See also

External links

Here are some examples of other existing design systems: