Tabs

Tabs are an easy way to organize content by grouping similar information on the same page. This allows content to be viewed without having to navigate away from that page. For navigating to different pages or areas with different content, use horizontal navigation guidelines.

Labeling

Tab labels provide clear and concise explanations of the content within. Each tab's content is in a category that is mutually exclusive of the content of other tabs.

  • Tab labels should be short and succinct and adequately describe the content.
  • tab labels
  • Labels should be text only.
  • tab icons

Behavior

It's important to provide different tab behavior during user interaction. When a page with tabs first loads there will always be a default state or preselected tab for the user. You might need to use other states as the user interacts with the tabs. To make the tab state clear to the user, include a default state, plus states for focus, hover, and when a tab is active.

  • Default view of tabs on a page. The underline indicates which tab is currently active, which means its content is visible. The active tab doesn't change on hover or focus change, unless the user clicks or hits enter to navigate to another tab.
  • tab default layout
  • This image demonstrates a mouse hover on the "Commit" tab. The active tab doesn't change until the user clicks or selects a new tab.
  • tab hover
  • Users navigating using the arrow keys or tabbing between controls will see these states. Notice that the "active" tab which the user is currently viewing is still underlined.
  • tab focus