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.

Presentational examples

Default tab
Hide code
Selected
Hide code
Select handler
Hide code

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.

Hide code

Tab Props

This component composes ../typography

onSelectfunc
Function triggered when tab is selected.
isSelectedbool
When true, the tab is selected.
appearancestring
The appearance of the tab. The default theme only comes with a default style.
classNamestring
Class name passed to the Tab. Only use this if you know what you are doing.

Sidebar tabs

TraitsEvent HistoryIdentities

Panel Traits

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

Hide code

SidebarTab Props

This component composes Tab

TabNavigation Props

This component composes ui-box

Tablist Props

This component composes ui-box