import {AnchorNav} from '@primer/react-brand'
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.
<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><sectionid="basic-section1"style={{padding: '100px 2rem',backgroundColor: 'var(--base-color-scale-lemon-0)',}}>Section 1</section><sectionid="basic-section2"style={{padding: '100px 2rem',backgroundColor: 'var(--base-color-scale-yellow-0)',}}>Section 2</section><sectionid="basic-section3"style={{padding: '100px 2rem',backgroundColor: 'var(--base-color-scale-lime-0)',}}>Section 3</section><sectionid="basic-section4"style={{padding: '100px 2rem',backgroundColor: 'var(--base-color-scale-green-0)',}}>Section 4</section><sectionid="basic-section5"style={{padding: '100px 2rem',backgroundColor: 'var(--base-color-scale-teal-0)',}}>Section 5</section></Box>
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><sectionid="fewer-links-section1"style={{padding: '100px 2rem',backgroundColor: 'var(--base-color-scale-lemon-0)',}}>Section 1</section><sectionid="fewer-links-section2"style={{padding: '100px 2rem',backgroundColor: 'var(--base-color-scale-yellow-0)',}}>Section 2</section><sectionid="fewer-links-section3"style={{padding: '100px 2rem',backgroundColor: 'var(--base-color-scale-lime-0)',}}>Section 3</section></Box>
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
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
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. See MDN for a list of props accepted by the <anchor>
element.