On this page
UnderlineNav
Use underline nav to allow tab like navigation with overflow behaviour in your UI.
- Alpha
- Not reviewed for accessibility
On this page
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
| Name | Type | Default | Description |
|---|---|---|---|
| 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. |
UnderlineNav.Link
| Name | Type | Default | Description |
|---|---|---|---|
| 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. |