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

UsageGuidelinesAPI

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.

ReactVanilla

<AnchorBar bgc="holiday-green-2" darkMode>
  <AnchorBarList>
    <AnchorBarListItem>
      <a href="#element-id-1">
        <span>Bestsellers</span>
        <AnchorBarListItemDescription>Description</AnchorBarListItemDescription>
      </a>
    </AnchorBarListItem>
    <AnchorBarListItem>
      <a href="#element-id-2">
        <span>Celebrations</span>
        <AnchorBarListItemDescription>Description</AnchorBarListItemDescription>
      </a>
    </AnchorBarListItem>
    <AnchorBarListItem>
      <a href="#element-id-3">
        <span>Celebrations</span>
        <AnchorBarListItemDescription>Description</AnchorBarListItemDescription>
      </a>
    </AnchorBarListItem>
  </AnchorBarList>
</AnchorBar>

<AnchorBar bgc="holiday-green-2" darkMode>
  <AnchorBarList>
    <AnchorBarListItem>
      <a href="#element-id-1">
        <span>Bestsellers</span>
        <AnchorBarListItemDescription>Description</AnchorBarListItemDescription>
      </a>
    </AnchorBarListItem>
    <AnchorBarListItem>
      <a href="#element-id-2">
        <span>Celebrations</span>
        <AnchorBarListItemDescription>Description</AnchorBarListItemDescription>
      </a>
    </AnchorBarListItem>
    <AnchorBarListItem>
      <a href="#element-id-3">
        <span>Celebrations</span>
        <AnchorBarListItemDescription>Description</AnchorBarListItemDescription>
      </a>
    </AnchorBarListItem>
  </AnchorBarList>
</AnchorBar>

<div role="navigation" class="swan-anchor-bar swan-bgc-holiday-beige-1">
  <ul role="list" class="swan-anchor-bar-list swan-list swan-list-skin-minimal">
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor1">Bestsellers</a>
    </li>
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor2">Celebrations</a>
    </li>
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor3">Trending products</a>
    </li>
    <li>
      <a href="#anchor4">Stationery</a>
    </li>
  </ul>
</div>

<div role="navigation" class="swan-anchor-bar swan-bgc-holiday-beige-1">
  <ul role="list" class="swan-anchor-bar-list swan-list swan-list-skin-minimal">
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor1">Bestsellers</a>
    </li>
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor2">Celebrations</a>
    </li>
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor3">Trending products</a>
    </li>
    <li>
      <a href="#anchor4">Stationery</a>
    </li>
  </ul>
</div>

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.

To mark an anchor as active (with the underline styling) set aria-active="true" on the anchor (or Link) component.

onActiveAnchorChanged will be called when a destination element scrolls into the viewport.

() => {
  const [activeAnchor, setActiveAnchor] = React.useState()

  return (
    <>
      <AnchorBar
        bgc="holiday-green-2"
        sticky
        darkMode
        onActiveAnchorChanged={setActiveAnchor}
      >
        <AnchorBarList>
          <AnchorBarListItem>
            <a
              href="#element-id-1"
              aria-current={
                activeAnchor === 'element-id-1' ? 'true' : undefined
              }
            >
              Bestsellers
            </a>
          </AnchorBarListItem>
          <AnchorBarListItem>
            <a
              href="#element-id-2"
              aria-current={
                activeAnchor === 'element-id-2' ? 'true' : undefined
              }
            >
              Celebrations
            </a>
          </AnchorBarListItem>
          <AnchorBarListItem>
            <a
              href="#element-id-3"
              aria-current={
                activeAnchor === 'element-id-3' ? 'true' : undefined
              }
            >
              Trending products
            </a>
          </AnchorBarListItem>
          <AnchorBarListItem>
            <a
              href="#element-id-4"
              aria-current={
                activeAnchor === 'element-id-4' ? 'true' : undefined
              }
            >
              Stationery
            </a>
          </AnchorBarListItem>
        </AnchorBarList>
      </AnchorBar>
      <section id="element-id-1">Bestsellers Contents</section>
      <section id="element-id-2">Celebrations Contents</section>
      <section id="element-id-3">Trending products Contents</section>
      <section id="element-id-4">Stationery Contents</section>
    </>
  )
}

() => {
  const [activeAnchor, setActiveAnchor] = React.useState()

  return (
    <>
      <AnchorBar
        bgc="holiday-green-2"
        sticky
        darkMode
        onActiveAnchorChanged={setActiveAnchor}
      >
        <AnchorBarList>
          <AnchorBarListItem>
            <a
              href="#element-id-1"
              aria-current={
                activeAnchor === 'element-id-1' ? 'true' : undefined
              }
            >
              Bestsellers
            </a>
          </AnchorBarListItem>
          <AnchorBarListItem>
            <a
              href="#element-id-2"
              aria-current={
                activeAnchor === 'element-id-2' ? 'true' : undefined
              }
            >
              Celebrations
            </a>
          </AnchorBarListItem>
          <AnchorBarListItem>
            <a
              href="#element-id-3"
              aria-current={
                activeAnchor === 'element-id-3' ? 'true' : undefined
              }
            >
              Trending products
            </a>
          </AnchorBarListItem>
          <AnchorBarListItem>
            <a
              href="#element-id-4"
              aria-current={
                activeAnchor === 'element-id-4' ? 'true' : undefined
              }
            >
              Stationery
            </a>
          </AnchorBarListItem>
        </AnchorBarList>
      </AnchorBar>
      <section id="element-id-1">Bestsellers Contents</section>
      <section id="element-id-2">Celebrations Contents</section>
      <section id="element-id-3">Trending products Contents</section>
      <section id="element-id-4">Stationery Contents</section>
    </>
  )
}

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.

prop	type	required	description	default
sticky	`boolean \| null`	false	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) \| null`	false	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.