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.
Use the new version of UnderlineNav with design and accessibility updates.
Attention: Make sure to properly label your UnderlineNav with an aria-label to provide context about the type of navigation contained in 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 |
| 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 |