Sub nav

A sub nav is a secondary navigation element, typically positioned beneath a primary navigation.

Experimental
Not reviewed for accessibility

<Container sx={{position: 'relative', height: 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>
</Container>

<Container sx={{position: 'relative', height: 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>
</Container>

<Container sx={{position: 'relative', height: 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>
</Container>

<Container sx={{position: 'relative', height: 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>
</Container>

<Container sx={{position: 'relative', height: 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>
</Container>

<Container sx={{position: 'relative', height: 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>
</Container>

<Container sx={{position: 'relative', height: 300}}>
  <SubNav hasShadow>
    <SubNav.Heading href="#">Features</SubNav.Heading>
    <SubNav.Link href="#">
      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="#" aria-current="page">
      Copilot
    </SubNav.Link>
    <SubNav.Link href="#">Code review</SubNav.Link>
  </SubNav>
</Container>

<Container sx={{position: 'relative', height: 300}}>
  <SubNav hasShadow>
    <SubNav.Heading href="#">Features</SubNav.Heading>
    <SubNav.Link href="#">
      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="#" aria-current="page">
      Copilot
    </SubNav.Link>
    <SubNav.Link href="#">Code review</SubNav.Link>
  </SubNav>
</Container>

Component props

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

name

type

default

required

description

hasShadow

boolean

false

Applies optional shadow, along with a fixed background color

fullWidth

boolean

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

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

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

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 sub menu links

name

type

default

required

description

children

SubNav.Link

false

Container for sub menu links

Primer Design System

Site navigation

On this page

Sub nav

Examples

Default

Shadow

Optional CTA

Optional sub menu

Component props

SubNav Required

SubNav.Heading Required

SubNav.Link Required

SubNav.Action

SubNav.SubMenu