Use the UnderlineNav component to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page.

To use UnderlineNav 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 UnderlineNav with an aria-label to provide context about the type of navigation contained in UnderlineNav.

Default example

Using <UnderlineNav.Link>

  Using <Text fontFamily="mono">{'<UnderlineNav.Link>'}</Text>
<UnderlineNav aria-label="Main">
  <UnderlineNav.Link href="#home" selected>
  <UnderlineNav.Link href="#documentation">Documentation</UnderlineNav.Link>
  <UnderlineNav.Link href="#support">Support</UnderlineNav.Link>

System props

UnderlineNav and UnderlineNav.Link components get COMMON system props. Read our System Props doc page for a full list of available props.

Component props


Prop nameTypeDescription
actionsNodePlace another element, such as a button, to the opposite side of the navigation items.
alignStringUse right to have navigation items aligned right.
fullBooleanUsed to make navigation fill the width of the container.
aria-labelStringUsed to set the aria-label on the top level <nav> element.


Prop nameTypeDescription
asStringsets the HTML tag for the component
selectedBooleanUsed to style the link as selected or unselected
Edit this page on GitHub