TabNav

Alpha

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

<TabNav aria-label="Main">
  <TabNav.Link href="#home" selected>
    Home
  </TabNav.Link>
  <TabNav.Link href="#documentation">Documentation</TabNav.Link>
  <TabNav.Link href="#support">Support</TabNav.Link>
</TabNav>

<TabNav aria-label="Main">
  <TabNav.Link href="#home" selected>
    Home
  </TabNav.Link>
  <TabNav.Link href="#documentation">Documentation</TabNav.Link>
  <TabNav.Link href="#support">Support</TabNav.Link>
</TabNav>

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