---
title: Anchor nav
description: Use the anchor nav component for prompt navigation to different sections of a page.
keywords: ['navigation', 'menu', 'sticky', 'links', 'sections']
ready: true
figma: https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=3359%3A30494&t=7vT79cAF1kbiMd2j-4
source: https://github.com/primer/brand/blob/main/packages/react/src/AnchorNav/AnchorNav.tsx
storybook: '/brand/storybook/?path=/story/components-anchornav--playground'
---

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

## Examples

> `AnchorNav` is designed to fix to the top of the viewport, and requires markup outside of the scope of the component to behave correctly.
>
> Please refer to our Storybook examples to see the component in a full-screen context as originally intended.

### Basic

```jsx
<div style={{position: 'relative', overflowX: 'scroll', width: '100%'}}>
  <AnchorNav>
    <AnchorNav.Link href="#basic-section1">Section one</AnchorNav.Link>
    <AnchorNav.Link href="#basic-section2">Section two</AnchorNav.Link>
    <AnchorNav.Link href="#basic-section3">Section three</AnchorNav.Link>
    <AnchorNav.Link href="#basic-section4">Section four</AnchorNav.Link>
    <AnchorNav.Link href="#basic-section5">Section five</AnchorNav.Link>
    <AnchorNav.Action href="#">Sign up</AnchorNav.Action>
  </AnchorNav>
  <section
    id="basic-section1"
    style={{
      padding: '100px 2rem',
      backgroundColor: 'var(--base-color-scale-lemon-0)',
    }}
  >
    Section 1
  </section>
  <section
    id="basic-section2"
    style={{
      padding: '100px 2rem',
      backgroundColor: 'var(--base-color-scale-yellow-0)',
    }}
  >
    Section 2
  </section>
  <section
    id="basic-section3"
    style={{
      padding: '100px 2rem',
      backgroundColor: 'var(--base-color-scale-lime-0)',
    }}
  >
    Section 3
  </section>
  <section
    id="basic-section4"
    style={{
      padding: '100px 2rem',
      backgroundColor: 'var(--base-color-scale-green-0)',
    }}
  >
    Section 4
  </section>
  <section
    id="basic-section5"
    style={{
      padding: '100px 2rem',
      backgroundColor: 'var(--base-color-scale-teal-0)',
    }}
  >
    Section 5
  </section>
</div>
```

### Secondary action

`AnchorNav` can also feature secondary actions. When two actions are present, the first will be presented as the `primary` variant.

```jsx
<div style={{position: 'relative', overflowX: 'scroll', width: '100%'}}>
  <AnchorNav>
    <AnchorNav.Link href="#fewer-links-section1">Section one</AnchorNav.Link>
    <AnchorNav.Link href="#fewer-links-section2">Section two</AnchorNav.Link>
    <AnchorNav.Link href="#fewer-links-section3">Section three</AnchorNav.Link>
    <AnchorNav.Action href="#">Sign up</AnchorNav.Action>
    <AnchorNav.SecondaryAction href="#">Learn more</AnchorNav.SecondaryAction>
  </AnchorNav>
  <section
    id="fewer-links-section1"
    style={{
      padding: '100px 2rem',
      backgroundColor: 'var(--base-color-scale-lemon-0)',
    }}
  >
    Section 1
  </section>
  <section
    id="fewer-links-section2"
    style={{
      padding: '100px 2rem',
      backgroundColor: 'var(--base-color-scale-yellow-0)',
    }}
  >
    Section 2
  </section>
  <section
    id="fewer-links-section3"
    style={{
      padding: '100px 2rem',
      backgroundColor: 'var(--base-color-scale-lime-0)',
    }}
  >
    Section 3
  </section>
</div>
```

### Fewer links

`AnchorNav` implementations with fewer than `5` links, will automatically align links to the `start`.

```jsx
<div style={{position: 'relative', overflowX: 'scroll', width: '100%'}}>
  <AnchorNav>
    <AnchorNav.Link href="#fewer-links-section1">Section one</AnchorNav.Link>
    <AnchorNav.Link href="#fewer-links-section2">Section two</AnchorNav.Link>
    <AnchorNav.Link href="#fewer-links-section3">Section three</AnchorNav.Link>
    <AnchorNav.Action href="#">Sign up</AnchorNav.Action>
  </AnchorNav>
  <section
    id="fewer-links-section1"
    style={{
      padding: '100px 2rem',
      backgroundColor: 'var(--base-color-scale-lemon-0)',
    }}
  >
    Section 1
  </section>
  <section
    id="fewer-links-section2"
    style={{
      padding: '100px 2rem',
      backgroundColor: 'var(--base-color-scale-yellow-0)',
    }}
  >
    Section 2
  </section>
  <section
    id="fewer-links-section3"
    style={{
      padding: '100px 2rem',
      backgroundColor: 'var(--base-color-scale-lime-0)',
    }}
  >
    Section 3
  </section>
</div>
```

## Component props

### AnchorNav `Required`

| Name                   | Type                                                    | Default | Description                                                             |
| :--------------------- | :------------------------------------------------------ | :-----: | :---------------------------------------------------------------------- |
| `children`             | `'AnchorNav.Link' \| 'AnchorNav.Action' \| 'ReactNode'` |         | Valid child nodes                                                       |
| `className`            | `string`                                                |         | Sets a custom class                                                     |
| `enableDefaultBgColor` | `boolean`                                               | `false` | Enable the idle state background color, which is transparent by default |
| `hideUntilSticky`      | `boolean`                                               | `false` | When true, the anchor nav will hide until it is sticky.                 |
| `id`                   | `string`                                                |         | Sets a custom id                                                        |
| `ref`                  | `React.RefObject`                                       |         | Forward a Ref to the underlying DOM node                                |

### AnchorNav.Link `Required`

`AnchorNav.Link` are anchor links that feature in the menubar

| Name        | Type              | Default | Description                                         |
| :---------- | :---------------- | :-----: | :-------------------------------------------------- |
| `children`  | `string`          |         | Required. Label text                                |
| `className` | `string`          |         | Applies a custom class                              |
| `href`      | `string`          |         | Required. Local identifier for the anchored element |
| `id`        | `string`          |         | Sets a custom id                                    |
| `isActive`  | `boolean`         | `false` | Manually indicate that the link is active           |
| `ref`       | `React.RefObject` |         | Forward a Ref to the underlying DOM node            |

Additional props can be passed to the `<a>` element. [See MDN for a list of props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) accepted by the `<anchor>` element.

### AnchorNav.Action

`AnchorNav.Action` is the primary call to action for the AnchorNav

| Name        | Type              | Default | Description                                         |
| :---------- | :---------------- | :-----: | :-------------------------------------------------- |
| `children`  | `string`          |         | Required. Label text                                |
| `className` | `string`          |         | Applies a custom class                              |
| `href`      | `string`          |         | Required. Local identifier for the anchored element |
| `id`        | `string`          |         | Sets a custom id                                    |
| `ref`       | `React.RefObject` |         | Forward a Ref to the underlying DOM node            |

Additional props can be passed to the `<a>` element. Refer to [Button](../Button/index.md) for more details or [MDN for a list of props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) accepted by the `<anchor>` element.

### AnchorNav.SecondaryAction

`AnchorNav.SecondaryAction` is an alternative call to action available for the AnchorNav

| Name        | Type              | Default | Description                                         |
| :---------- | :---------------- | :-----: | :-------------------------------------------------- |
| `children`  | `string`          |         | Required. Label text                                |
| `className` | `string`          |         | Applies a custom class                              |
| `href`      | `string`          |         | Required. Local identifier for the anchored element |
| `id`        | `string`          |         | Sets a custom id                                    |
| `ref`       | `React.RefObject` |         | Forward a Ref to the underlying DOM node            |

Additional props can be passed to the `<a>` element. Refer to [Button](../Button/index.md) for more details or [MDN for a list of props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) accepted by the `<anchor>` element.