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'

Default example

Using <UnderlineNav.Link>

  Using <Text fontFamily="mono">{'<UnderlineNav.Link>'}</Text>
  <UnderlineNav.Link href="#foo" selected>
  <UnderlineNav.Link href="#bar">Bar</UnderlineNav.Link>
  <UnderlineNav.Link href="#baz">Baz</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.
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