UnderlineNav

Use underline nav to allow tab like navigation with overflow behaviour in your UI.
  • Alpha
  • Not reviewed for accessibility

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.

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
Style overrides to apply to the component. See also overriding styles.
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
Style overrides to apply to the component. See also overriding styles.