@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
221 lines (194 loc) • 9.07 kB
Markdown
---
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.