Skip to main content


Suggest edit Updated on February 2, 2021

Tabs are a UI component used for organizing information by showing one grouping of information while hiding other related items at the same time.


Some quick things to follow when using tabs:

  • Never nest tabs (never have tabs within tabs within the same content section).
  • Only show read-only information within tabs (no data entry).
  • Everything underneath the tab group belongs to the active tab and the tabs should fall on the grey background.
  • Tabs in a single “tile”/white container are easier to understand and manage. Use header levels to distinguish information under a tab.
  • Limit number of tabs to 7 or less.
Did you find this content helpful? YesNo

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us