Use Tabs to organize your content in logical groupings.



Evergreen exports the following components to build tabbed navigation.

  • Tab: the base horizontal tab component.
  • Tablist: a accessibility helper component used when tabs toggle panels on the page.
  • TabNavigation: a accessibility helper component used when tabs are links.


The Tab component should be wrapped in a Tablist or TabNavigation component to comply to WAI-ARIA accessibility standards.

TraitsEvent HistoryIdentities

Panel Traits

If you are using a link (a tag), make sure to wrap your tabs in a TabNavigation component.

Tabs can be rendered in a vertical direction for use in a sidebar.

TraitsEvent HistoryIdentities

Panel Traits