Sub nav

Ready to use


import {SubNav} from '@primer/react-brand'

Examples

Subheading

Internal SubNav labels such as the “More” link are rendered in en by default. Use menuLabels to customize these to different locales.

Optional submenu

Submenus appear as a dropdown by default.

Optional anchor-based submenu

Ensure that the text of each SubNav.Link within the anchor-based submenu fits entirely within a 320px-wide viewport. Failure to do this violates WCAG 1.4.10 Reflow.

Component props

SubNav Required

name	type	default	required	description
`fullWidth`	`boolean`	`false`	`false`	Allows the SubNav to be used at full width, removing default internal padding
`menuLabels`	`Partial<SubNavMenuLabels>`	English labels	`false`	Customizes the menu’s accessible labels

SubNavMenuLabels is exported from @primer/react-brand.

Field	Type	English default	Purpose
`menuLabel`	`string`	`Navigation menu`	Accessible label while the narrow menu is closed
`closeLabel`	`string`	`Close navigation menu`	Accessible label while the narrow menu is open
`activeLabel`	`string`	`Navigation menu. Current page:`	Complete prefix while the narrow menu is closed and a current page is present
`closeActiveLabel`	`string`	`Close navigation menu. Current page:`	Complete prefix while the narrow menu is open and a current page is present
`overflowMenuLabel`	`string`	`More`	Visible and accessible label for the desktop overflow menu

SubNav.Heading is a styled a tag which describes the overarching category of the other links within the SubNav. The SubNav.Heading is structurally identical to a SubNav.Link and differs only in visual styling.

name	type	default	required	description
`href`	`string`			URL of the page the link goes to

SubNav.SubHeading

name	type	default	required	description
`href`	`string`			URL of the page the link goes to

SubNav.Link Required

name	type	default	required	description
`aria-current`	`string`		`true`	Required for indicating the current active link
`href`	`string`		`true`	URL of the page the link goes to
`variant`	`'default'` `'muted'`	`muted`	`false`	Alternative idle text appearance

SubNav.Action

name	type	default	required	description
`href`	`string`		`false`	URL of the page the action goes to

SubNav.SubMenu

name	type	default	required	description
`children`	`SubNav.Link`		`false`	Container for submenu links
`variant`	`'dropdown'` `'anchor'`	`'default'`	`false`	Alternative presentation for submenus
`aria-label`	`string`	`'Sub navigation'` (content)	`false`	Complete accessible name for the submenu toggle and content; names the navigation landmark for the anchor variant

Examples

Default