Skip to content
Primer/React
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactReact BrandViewComponents
ContributeAbout
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
Style overrides to apply to the component. See also overriding styles.

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
Style overrides to apply to the component. See also overriding styles.
Edit this page on GitHub
2 contributorsjoshblackcolebemis
Last edited by joshblack on February 7, 2023