@primer/react-brand/docs/components/SubNav/index.md

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

---
title: Sub nav
description: A sub nav is a secondary navigation element, typically positioned beneath a primary navigation.
keywords: ['navigation', 'secondary', 'second level']
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/SubNav/SubNav.tsx
storybook: '/brand/storybook/?path=/story/components-subnav--default'
---

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

## Examples

### Default

```jsx
<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

```jsx
<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>
```

### Optional CTA

```jsx
<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.

```jsx
<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](https://github.com/github/accessibility-audit-guide/blob/main/web/WCAG/1.4.10%20Reflow.md).

```jsx
<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                                                                   |
| ----------- | --------- | ------- | -------- | ----------------------------------------------------------------------------- |
| `fullWidth` | `boolean` | `false` | `false`  | Allows the SubNav to be used at full width, removing default internal padding |

### SubNav.Heading `Required`

`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`  | `SubNavSubMenuVariants` | `'default'` | `false`  | Alternative presentation for submenus |