UnderlineNav

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 is={NavLink} and omit the selected prop. This ensures that the NavLink gets activeClassName='selected'

Default example

Using <UnderlineNav.Link>

<ExampleHeading>
  Using <Text fontFamily="mono">{'<UnderlineNav.Link>'}</Text>
</ExampleHeading>
<UnderlineNav>
  <UnderlineNav.Link href="#foo" selected>
    Selected
  </UnderlineNav.Link>
  <UnderlineNav.Link href="#bar">Bar</UnderlineNav.Link>
  <UnderlineNav.Link href="#baz">Baz</UnderlineNav.Link>
</UnderlineNav>

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

UnderlineNav

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.

UnderlineNav.Link

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