On this page
SubNav
Use the sub nav component for navigation on a dashboard-type interface with another set of navigation components above it.
- Alpha
- Not reviewed for accessibility
On this page
Use the SubNav component for navigation on a dashboard-type interface with another set of navigation components above it. This helps distinguish navigation hierarchy.
To use SubNav 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 SubNav with an aria-label to provide context about the type of navigation contained in SubNav.
Examples
Default
SubNav with search
SubNav with filtered search
Props
SubNav
| 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. |
SubNav.Link
| Name | Type | Default | Description |
|---|---|---|---|
| as | React.ElementType | 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. |
SubNav.Links
| Name | Type | Default | Description |
|---|---|---|---|
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. |