Skip to content


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

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
2 contributorsdmarceyemplums
Last edited by dmarcey on September 18, 2019