Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Tabs

Use with caution: Available
Tabs organize related groups of content within the same hierarchy into parallel views that a user can easily navigate between.

Examples

GI Bill Comparison Tool

GI bill comparison tool tabs

Facility locator mobile view

facility locator mobile tabs

Usage

Because tabs stack horizontally or wrap to a second line, they’re not an optimal design solution for mobile viewports. In some cases, using 2 tabs (only) to present a set of complementary options is acceptable.

When to use tabs

  • To group 2 to 3 pieces of related content that the user doesn’t need to read at the same time.
  • To allow the user to easily toggle between a binary set of options, like Search by name/Search by location or View list/View map.

When to consider something else

  • Consider using a single-select accordion to display one chunk of content at a time.
  • If your content is hierarchical and/or sequential, consider using a single page of well-formatted headings and body text.

Behavior and design

  • Allow the user to click anywhere on a tab to select it.
  • Make sure the selected tab is highlighted and visually connected to the content below it.
  • Never let a row of tabs wrap to a second line.
  • Keep the interaction design simple. Document selected and not selected tab styles along with the focus state for each style. Hover and active states are optional for tabs.

Content considerations

  • Keep tab labels succinct and use plain language. Labels should be 1 to 2 words.
  • Use sentence case for tab labels.

Accessibility considerations

Edit this page in GitHub (Permissions required)
Last updated: Apr 21, 2022