Tabs

What

Tabs are controls at the top or side of a section of a page that resemble tabs from a file folder.

Why

To organize content and allow a user to easily switch which content is visible.

Where

Typically at the top, or along the side, of a section of content

Best Practices

  • Use tabs to switch views, not navigate to a different context altogether.
  • Don’t use tabs when the user will need to see more than one view at the same time. In other words, if the content viewed with “Tab A” needs to be seen at the same time as “Tab B”, don’t use tabs.
  • Make the currently selected tab prominent in some way to make it obvious which tab is selected.
  • Use plain language and 1-2 words at most.
  • It’s best to not have more than one row of tabs.

Related Principles

Design Systems

Design Systems

A design system is a set of design standards for a company or a specific project. The primary elements of a design system are: color & text styles, icons & illustrations, and commonly used components. It can also include things like code standards, layout...

UX/UI Design Glossary

UX/UI Design Glossary

Chrome Visual elements that provide users information about or commands to use the screen's content. Chrome is not part of the content itself. Examples would be buttons, labels, and menus. Edge Case An uncommon situation when a user's experience falls outside the...