Layout

Tabs

Underline tabs between the sibling pages of one section, such as Overview, Run history and Git snapshots under Analytics.

Examples

Section tabs

<Tabs aria-label="Analytics sections">
  <Tab component={Link} href="/analytics" active>Overview</Tab>
  <Tab component={Link} href="/analytics/runs">Run history</Tab>
  <Tab component={Link} href="/analytics/snapshots">Git snapshots</Tab>
</Tabs>

Guidelines

Tabs is a nav with an aria-label; each Tab is a link (component={Link}) or a button for in-page switching. The active tab carries aria-current.
Two to five tabs; tabs are not a segmented control (which filters a view) and not a sidebar (which changes section).

Props

Prop	Type	What it does
aria-label	string	Tabs: names the set.
component, href, active	ElementType, string, boolean	Tab: the element, the target, the current one.