Tabs separate content into panes so users can easily access additional related content without refreshing the page.

Usage

  • Use tabs to separate content into different views that users can select one at a time without needing to go to a new page.
  • Use tabs when content or views are closely related and mutually exclusive.
  • Use tabs when users don’t need to see more than one content panel at a time.
  • Try to place tabs in order, with the most relevant or useful content first (on the left). For example, the first tab should contain the content that is most relevant to the page it’s on. This will generally be the most popular or useful information.
  • Work with a content designer or information architect to determine the order of tabs and their labels.

Appearance and behavior

When a user selects a tab, the related content appears. That content is unique and independent from what appears when the user selects other tabs.

  • Selected tab text is 14 pixels, #393A3D, Demi.
  • Selection tab is #2CA01C and 4 pixels high.
  • Each tab has 30 pixels padding on the left and right.
  • A button with an icon has 10 pixels of padding on the left and 15 pixels of padding on the right. Icon square 10 pixels always appears to the left of text. Badges always appear to the right of text.

Tabs without icons

Tabs without icons

Tabs with icons This presentation appears less often in the product.

Tabs with badges

Breakpoint changes on devices

On mobile devices and tablets, some notable responsive or adaptive changes include the following:

On larger breakpoints

  • There is enough room to show the tabs next to each other horizontally.

On smaller breakpoints

Tabs remain on the page and scroll horizontally as necessary to reveal any tabs that don’t fit on the screen.
 

Content guidelines

  • Tabs are a way of organizing content so that users can reach it without opening a new page or screen. Be sure the content each tab reveals is related and doesn’t necessarily need to be seen at the same time as the content on another tab. Example: Features, Integration, Support, Testimonials.
  • Keep tab labels brief, usually one or two words.
  • Use sentence case for tab labels. Example: Small business, Plans and prices, For accountants.
  • Recommended voice and tone attribute: straightforward

Examples

Vendors page with tabs

Demo

Launch Preview
x
px wide

Fixed

  • Be sure to display at least two tabs.

Flexible

  • Illustration usage.
  • Tab animations.

Do

  • Use tabs when content or views are closely related, mutually exclusive.
  • Use tabs when users don’t need to see more than one content pane at a time.
  • Place content sequence in order of relevance.

Don't

  • When the contents of each tab are not related to the parent page.
  • When the contents of each tab are not related.
  • When it is important to see all of the content at the same time.
  • Use as a utility for controlling carousels.
  • Use as a way to paginate content.
  • Was this Helpful?
  •