Evergreen exports the following components to build tabbed navigation.

• Tab: the base horizontal tab component.
• SidebarTab: a vertical tab component used in sidebars.
• 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.

If you are not using a link (a tag) for your Tab, make sure to wrap in a Tablist, see examples below.

TraitsEvent HistoryIdentities
Panel Traits
Panel Event History
Panel Identities

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

TraitsEvent HistoryIdentities
Panel Traits
Panel Event History
Panel Identities

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