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

### Localized menu controls

Internal `SubNav` labels such as the "More" link are rendered in `en` by default. Use `menuLabels` to customize these to different locales.

```jsx
<div style={{position: 'relative', height: 360, width: '100%'}}>
  <SubNav
    menuLabels={{
      menuLabel: 'Menú de navegación',
      closeLabel: 'Cerrar menú de navegación',
      activeLabel: 'Menú de navegación. Página actual:',
      closeActiveLabel: 'Cerrar menú de navegación. Página actual:',
      overflowMenuLabel: 'Más',
    }}
  >
    <SubNav.Heading href="#">AI</SubNav.Heading>
    <SubNav.SubHeading href="#">GitHub Copilot</SubNav.SubHeading>
    <SubNav.Link href="#">Aplicación de escritorio</SubNav.Link>
    <SubNav.Link href="#" aria-current="page">
      Copilot en VS Code
    </SubNav.Link>
    <SubNav.Link href="#">Agentes en GitHub</SubNav.Link>
    <SubNav.Link href="#">Copilot CLI</SubNav.Link>
    <SubNav.Link href="#">Revisión de código de Copilot</SubNav.Link>
    <SubNav.Link href="#">Para empresas</SubNav.Link>
    <SubNav.Link href="#">Tutoriales</SubNav.Link>
    <SubNav.Link href="#">Planes y precios</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 aria-label="Actions 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 |
| `menuLabels` | `Partial<SubNavMenuLabels>` | English labels | `false`  | Customizes the menu's accessible labels                                       |

`SubNavMenuLabels` is exported from `@primer/react-brand`.

#### Menu labels

| Field               | Type     | English default                        | Purpose                                                                       |
| ------------------- | -------- | -------------------------------------- | ----------------------------------------------------------------------------- |
| `menuLabel`         | `string` | `Navigation menu`                      | Accessible label while the narrow menu is closed                              |
| `closeLabel`        | `string` | `Close navigation menu`                | Accessible label while the narrow menu is open                                |
| `activeLabel`       | `string` | `Navigation menu. Current page:`       | Complete prefix while the narrow menu is closed and a current page is present |
| `closeActiveLabel`  | `string` | `Close navigation menu. Current page:` | Complete prefix while the narrow menu is open and a current page is present   |
| `overflowMenuLabel` | `string` | `More`                                 | Visible and accessible label for the desktop overflow menu                    |

### 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                                                                             |
| `aria-label` | `string`                | `'Sub navigation'` (content) | `false`  | Complete accessible name for the submenu toggle and content; names the navigation landmark for the anchor variant |