HomeFoundationsComponents
AccordionAction IconBreadcrumbButtonButton GroupCardCheckboxChipContext Switcher
Data VisualizationComing Soon
Date PickerComing Soon
DialogEmpty State
Form LabelComing Soon
ImageInputLinkListLoaderMenuModalPopoutProgress BarRadioRange SliderScroll BarSelectStepperSwitch
TableComing Soon
TabsTileToastToggle ButtonTooltip
PatternsDevelopmentFAQ
Tabs
Last Updated on Dec 15, 2022
Tabs are used to navigate between related content on the page.
View Figma ComponentView MAF Storybook

Design Principles

  • Use tabs to switch between content that is mutually exclusive. Only one tab can be selected at a time.
  • Tabs should not be used to filter or show different contexts of a data set. Use a Context Switcher instead.
  • Tabs should be aligned to the top, left (or right with RTL languages) of the page or container.
  • Tab labels should be very concise. Try to use no more than 2 words. Optionally, tabs can have icons. Every tab should have an icon, not just one tab. Chips are also available.
  • Use icons only when they add essential value to the label. Do not use them for pure decoration.
  • Do not mix different variants of tabs, e.g. using with & without icons in the same tab group.
  • On mobile designs, tabs should not be used. Use a Context Switcher instead. They emulate tabs in iOS. They should be used instead of the tabs component on mobile because they look more like the conventions for mobile tabs.
  • For more complex pages, you can add up to two levels of secondary tabs. They are only to be used as a supplement under the primary tab component.

Do's and Don'ts

Use when there is a large amount of content or information that needs to be organized into distinct categories or sections.
Use clear, descriptive labels for each tab. Make it clear what content is contained within each section.
Use the option with a bottom border if you need more delineation between tabs and the content.
Use primary and secondary tabs for very complex data with multiple views and categories of data.
Don’t use tabs as a replacement for side navigation. Use side navigation to properly section off content into pages and tabs to section content on a single page.
Don't use tabs to hide important content. Tabs should be used to organize and present information, not to hide it from the user.
Don’t place tabs on the right side of the page.
Don’t make tabs fill the full width of the container. Tabs should hug the contents of the label.
Table of Contents
Component VariantsDesign PrinciplesDo's and Don'ts
Related Components
Context SwitcherLink
Copyright © 2022 The Nielsen Company (US), LLC. All Rights Reserved.