UnderlineNav

Use underline nav to allow tab like navigation with overflow behaviour in your UI.
  • Alpha
  • Not reviewed for accessibility
This documentation is moving to a new home. Please update any link or bookmark that points to this page. The new content can be found here.

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

Deprecation

UnderlineNav is deprecated and will be replaced by the draft UnderlineNav in the next major release. See the draft UnderlineNav's docs for more details.

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.

Examples

Props

UnderlineNav

NameTypeDefaultDescription
actions
React.ReactNode

Place another element, such as a button, to the opposite side of the navigation items.

align
'right'

Use right to have navigation items aligned right.

full
boolean

Used to make navigation fill the width of the container.

aria-label
string

Used to set the aria-label on the top level <nav> element.

sx
SystemStyleObject
NameTypeDefaultDescription
as
React.ElementType
'a'

The underlying element to render — either a HTML element name or a React component.

href
string
selected
boolean
sx
SystemStyleObject