Sub nav - Primer

Ready to use


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

Examples

Default

<div style={{position: 'relative', height: 100, width: '100%'}}>
  <SubNav>
    <SubNav.Heading href="#">Features</SubNav.Heading>
    <SubNav.Link href="#">Actions</SubNav.Link>
    <SubNav.Link href="#">Packages</SubNav.Link>
    <SubNav.Link href="#" aria-current="page">
      Copilot
    </SubNav.Link>
    <SubNav.Link href="#">Code review</SubNav.Link>
  </SubNav>
</div>

Subheading

<div style={{position: 'relative', height: 100, width: '100%'}}>
  <SubNav>
    <SubNav.Heading href="#">AI</SubNav.Heading>
    <SubNav.SubHeading href="#" aria-current="page">
      Copilot
    </SubNav.SubHeading>
    <SubNav.Link href="#">What&apos;s new</SubNav.Link>
    <SubNav.Link href="#">Plans &amp; pricing</SubNav.Link>
    <SubNav.Link href="#">For business</SubNav.Link>
  </SubNav>
</div>

Shadow

<div style={{position: 'relative', height: 100, width: '100%'}}>
  <SubNav hasShadow>
    <SubNav.Heading href="#">Features</SubNav.Heading>
    <SubNav.Link href="#">Actions</SubNav.Link>
    <SubNav.Link href="#">Packages</SubNav.Link>
    <SubNav.Link href="#" aria-current="page">
      Copilot
    </SubNav.Link>
    <SubNav.Link href="#">Code review</SubNav.Link>
  </SubNav>
</div>

Optional CTA

<div style={{position: 'relative', height: 100, width: '100%'}}>
  <SubNav hasShadow>
    <SubNav.Heading href="#">Features</SubNav.Heading>
    <SubNav.Link href="#">Actions</SubNav.Link>
    <SubNav.Link href="#">Packages</SubNav.Link>
    <SubNav.Link href="#" aria-current="page">
      Copilot
    </SubNav.Link>
    <SubNav.Link href="#">Code review</SubNav.Link>
    <SubNav.Action href="#">CTA</SubNav.Action>
  </SubNav>
</div>

Optional submenu

Submenus appear as a dropdown by default.

<div style={{position: 'relative', height: 300, width: '100%'}}>
  <SubNav hasShadow>
    <SubNav.Heading href="#">Features</SubNav.Heading>
    <SubNav.Link href="#" aria-current="page">
      Actions
      <SubNav.SubMenu>
        <SubNav.Link href="#">Actions feature one</SubNav.Link>
        <SubNav.Link href="#">Actions feature two</SubNav.Link>
        <SubNav.Link href="#">Actions feature three</SubNav.Link>
        <SubNav.Link href="#">Actions feature four</SubNav.Link>
      </SubNav.SubMenu>
    </SubNav.Link>
    <SubNav.Link href="#">Packages</SubNav.Link>
    <SubNav.Link href="#">Copilot</SubNav.Link>
    <SubNav.Link href="#">Code review</SubNav.Link>
  </SubNav>
</div>

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.

<div style={{position: 'relative', height: 300, width: '100%', overflowY: 'scroll'}}>
  <Box style={{height: 1000}}>
    <SubNav>
      <SubNav.Heading href="#">Features</SubNav.Heading>
      <SubNav.Link href="#" aria-current="page">
        Actions
        <SubNav.SubMenu variant="anchor">
          <SubNav.Link href="#">Actions feature one</SubNav.Link>
          <SubNav.Link href="#">Actions feature two</SubNav.Link>
          <SubNav.Link href="#">Actions feature three</SubNav.Link>
          <SubNav.Link href="#">Actions feature four</SubNav.Link>
        </SubNav.SubMenu>
      </SubNav.Link>
      <SubNav.Link href="#">Packages</SubNav.Link>
      <SubNav.Link href="#">Copilot</SubNav.Link>
      <SubNav.Link href="#">Code review</SubNav.Link>
    </SubNav>
  </Box>
</div>

Component props

SubNav Required

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

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