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
This documentation is moving to a new home. Please update any link or bookmark that points to this page. The new content can be found here.

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

Props

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
NameTypeDefaultDescription
as
React.ElementType

The underlying element to render — either a HTML element name or a React component.

href
string
selected
boolean
sx
SystemStyleObject
NameTypeDefaultDescription
sx
SystemStyleObject