Tab Bar

Tab bar is used for lateral navigation between multiple sections or elements of the same hierarchy.

Ready to Use

Show details

Introduction

Tab Bar is used for lateral navigation between multiple sections or elements of the same hierarchy. They typically consist of a set of tab labels that represent each section and a corresponding content area for each tab. When a user selects a tab, the content associated with that tab is displayed in a tab panel while hiding the content of other tabs.

Common use cases include: settings panels, product catalogs and more.

Usage

Do use for separating sections of grouped content
Use tabs to group related content into different categories, reducing long scroll time and cognitive load.

Don't use as main navigational element
Never use tabs as a primary navigation. Use the navigation component instead.

Do use two or more content sections
Use tabs whenever there are two or more content sections.

Don't use for more than seven content sections
Avoid using more than seven content sections. Try to restructure your content instead.

Do use short tab labels
Keep labels short, preferably to one word, and descriptive.

Don't use overly long or vague tab labels
Avoid using long tab labels and refrain from using non-descriptive labels. Avoid truncating tab labels.

Do use consistent tab labels
Use consistent tab labels in language, tone of voice and type (text or text+icon).

Don't mix tab labels
Stick to one type of label, either text-only or text+icon. Don't mix language, wording and tone of voice.

Mobile Specs

Do display full width
Display tabs full width (100vw, or 100%) on mobile

Don't display smaller than full-width

Also known as

Tab switcher, Horizontal Tabs, Tab Panel, Tab Bar