<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Anchor Bar

A horizontal sub-navigation component composed of anchor links. It is used to link to other parts of the current page and can be made stick to the top of the page on scroll.
styleKeys: anchorBar

Use Anchor Bar...

  • To display a horizontal sub-navigation, allowing you to link to a section of the current page.

Don't use Anchor Bar...

  • To link outside of the page.

List Item Description

Use the optional AnchorBarListItemDescription component to disable a description / sub-title for an anchor element. Use it as a child of the anchor element.

If using AnchorBarListItemDescription , we recommend using a description on all listed items to ensure consistent horizontal alignment of item and description copy.

The preview has been updated.

Sticky

Use sticky to make the Anchor Bar stick to the top of the viewport as the user scrolls past it. It also enables the logic to detect the currently active anchor item. To associate a page element with an anchor, the href of the anchor must match the id of the element, prefixed with #. This creates a native html in-page anchor link.

When links are associated with elements elsewhere on the page, the Anchor Bar will track when those elements scroll into view to denote the currently active anchor link.

The preview has been updated.

Background color

Use bgc or backgroundColor to set the background color of the Anchor Bar. The same background color will be used for both the default and sticky versions.

Use darkMode to use dark mode settings on darker colors.

Refer to the color guidelines.

Number of links

We recommend using between 2-7 links. On smaller mobile devices, 2-3 links typically fits nicely on a single viewport.

Character count

Due to technical limitations, the text will NOT wrap into two lines. Therefore, we recommend a max character limit of 25 for both the List Item and Description text.

Props

AnchorBar
The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
stickyboolean | nullfalse
Whether or not the element should stick to the top of the screen when scrolling past it. Sticky also enables the scroll behavior to update the active anchor on scroll
null
onActiveAnchorChanged((...args: any[]) => any) | nullfalse
When sticky, the function is called when an element with an id that matches one of the AnchorBar a element's href attribute scrolls into view on the screen
null
AnchorBarList
This component is implemented using the <ul /> as the root element. You can utilize the native attributes supported by <ul /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
AnchorBarListItem
This component is implemented using the <li /> as the root element. You can utilize the native attributes supported by <li /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
AnchorBarListItemDescription
This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.

Related