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 |