AnchorNav

Use AnchorNav for prompt navigation to different sections of a page.

Experimental
Not reviewed for accessibility

On this page

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

<Box sx={{position: 'relative', overflowX: 'scroll'}}>
  <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>
</Box>

<Box sx={{position: 'relative', overflowX: 'scroll'}}>
  <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>
</Box>

Fewer links

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

<Box sx={{position: 'relative', overflowX: 'scroll'}}>
  <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>
</Box>

<Box sx={{position: 'relative', overflowX: 'scroll'}}>
  <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>
</Box>

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
`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 accepted by the <anchor> element.

AnchorNav.Action Required

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

Name	Type	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. See MDN for a list of props accepted by the <anchor> element.

Edit this page on GitHub