Sub nav
A sub nav is a secondary navigation element, typically positioned beneath a primary navigation.
import {SubNav} from '@primer/react-brand'
Submenus appear as a dropdown by default.
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.
name | type | default | required | description |
---|---|---|---|---|
hasShadow | boolean | false | false | Applies optional shadow, along with a fixed background color |
fullWidth | boolean | false | false | Allows the SubNav to be used at full width, removing default internal padding |
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 |
name | type | default | required | description |
---|---|---|---|---|
href | string | URL of the page the link goes to |
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 |
name | type | default | required | description |
---|---|---|---|---|
href | string | false | URL of the page the action goes to |
name | type | default | required | description |
---|---|---|---|---|
children | SubNav.Link | false | Container for submenu links | |
variant | 'dropdown' 'anchor' | 'default' | false | Alternative presentation for submenus |