Skip to content
Primer Design System/React
BrandView ComponentsReact Components

On this page

TabNav

Use tab nav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
  • Alpha
  • Not reviewed for accessibility
On this 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.

Examples

Props

TabNav

NameTypeDefaultDescription
aria-label
string

Used to set the aria-label on the top level <nav> element.

sx
SystemStyleObject

TabNav.Link

NameTypeDefaultDescription
as
React.ElementType
'a'

The underlying element to render — either a HTML element name or a React component.

href
string
selected
boolean
sx
SystemStyleObject