Skip to content
On this page
TabNav
- Alpha
- Not reviewed for accessibility
On this page
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
Component props
TabNav
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | String | Used to set the aria-label on the top level <nav> element. | |
| sx | SystemStyleObject | {} | Style to be applied to the component |
TabNav.Link
| Name | Type | Default | Description |
|---|---|---|---|
| as | String | sets the HTML tag for the component | |
| href | String | URL to be used for the Link | |
| selected | Boolean | Used to style the link as selected or unselected | |
| sx | SystemStyleObject | {} | Style to be applied to the component |
Edit this page on GitHub
4 contributors
Last edited by colebemis on December 16, 2021