Anchor nav - Brand UI

Ready to use


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

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

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

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

AnchorNav.Action

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. Refer to Button for more details or MDN for a list of props accepted by the <anchor> element.

AnchorNav.SecondaryAction

AnchorNav.SecondaryAction is an alternative call to action available 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. Refer to Button for more details or MDN for a list of props accepted by the <anchor> element.