Skip to content



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

Component props


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.
sxSystemStyleObject{}Style to be applied to the component
asStringsets the HTML tag for the component
hrefStringURL to be used for the Link
selectedBooleanUsed to style the link as selected or unselected
sxSystemStyleObject{}Style to be applied to the component