Use the TabNav component to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.

To use TabNav with react-router or react-router-dom, pass as={NavLink} and omit the selected prop. This ensures that the NavLink gets activeClassName='selected'

Attention: Make sure to properly label your TabNav with an aria-label to provide context about the type of navigation contained in TabNav.

Default example

Using <TabNav.Link>

  Using <Text fontFamily="mono">{'<TabNav.Link>'}</Text>
<TabNav aria-label="Main">
  <TabNav.Link href="#home" selected>
  <TabNav.Link href="#documentation">Documentation</TabNav.Link>
  <TabNav.Link href="#support">Support</TabNav.Link>

System props

TabNav and TabNav.Link components get COMMON system props. Read our System Props doc page for a full list of available props.

Component props


Prop nameTypeDescription
aria-labelStringUsed to set the aria-label on the top level <nav> element.


Prop nameTypeDescription
asStringsets the HTML tag for the component
hrefStringURL to be used for the Link
selectedBooleanUsed to style the link as selected or unselected
Edit this page on GitHub