Anchor nav
Use the anchor nav component for prompt navigation to different sections of a page.
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.
AnchorNav can also feature secondary actions. When two actions are present, the first will be presented as the primary variant.
AnchorNav implementations with fewer than 5 links, will automatically align links to the start.
| 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 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. Refer to Button for more details or MDN for a list of props accepted by the <anchor> element.
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 for more details or MDN for a list of props accepted by the <anchor> element.