Sub nav

A sub nav is a secondary navigation element, typically positioned beneath a primary navigation.
  • Experimental
  • Not reviewed for accessibility
import {SubNav} from '@primer/react-brand'

Examples

Default

Shadow

Optional CTA

Optional sub menu

Component props

nametypedefaultrequireddescription
hasShadowbooleanfalsefalseApplies optional shadow, along with a fixed background color
fullWidthbooleanfalsefalseAllows 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.

nametypedefaultrequireddescription
hrefstringURL of the page the link goes to
nametypedefaultrequireddescription
aria-currentstringtrueRequired for indicating the current active link
hrefstringtrueURL of the page the link goes to
nametypedefaultrequireddescription
hrefstringfalseURL of the page the action goes to
nametypedefaultrequireddescription
childrenSubNav.LinkfalseContainer for sub menu links