Skip to content
Primer Design System/React
BrandView ComponentsReact Components

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

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

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.

SubNav.Link

NameTypeDefaultDescription
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

NameTypeDefaultDescription
sx
SystemStyleObject
Style overrides to apply to the component. See also overriding styles.