Tab

Use Tabs to organize your content in logical groupings.

DetailsProperties

Introduction

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.

Accessibility

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

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

TraitsEvent HistoryIdentities

Panel Traits

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