Anchor Bar

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, instead you can use Left Hand Navigation , Links or Menu. Find out more in the guidelines page.

ReactVanilla

<AnchorBar>
  <AnchorBarList>
    <AnchorBarListItem>
      <a href="#element-id-1">
        <span>Label</span>
      </a>
    </AnchorBarListItem>
    <AnchorBarListItem>
      <a href="#element-id-2">
        <span>Label</span>
      </a>
    </AnchorBarListItem>
    <AnchorBarListItem>
      <a href="#element-id-3">
        <span>Label</span>
      </a>
    </AnchorBarListItem>
  </AnchorBarList>
</AnchorBar>

<AnchorBar>
  <AnchorBarList>
    <AnchorBarListItem>
      <a href="#element-id-1">
        <span>Label</span>
      </a>
    </AnchorBarListItem>
    <AnchorBarListItem>
      <a href="#element-id-2">
        <span>Label</span>
      </a>
    </AnchorBarListItem>
    <AnchorBarListItem>
      <a href="#element-id-3">
        <span>Label</span>
      </a>
    </AnchorBarListItem>
  </AnchorBarList>
</AnchorBar>

<div role="navigation" class="swan-anchor-bar">
  <ul role="list" class="swan-anchor-bar-list swan-list swan-list-skin-minimal">
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor1">Label</a>
    </li>
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor2">Label</a>
    </li>
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor3">Label</a>
    </li>
  </ul>
</div>

<div role="navigation" class="swan-anchor-bar">
  <ul role="list" class="swan-anchor-bar-list swan-list swan-list-skin-minimal">
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor1">Label</a>
    </li>
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor2">Label</a>
    </li>
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor3">Label</a>
    </li>
  </ul>
</div>

List Item Description

Use the optional AnchorBarListItemDescription component to enable 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>
  <AnchorBarList>
    <AnchorBarListItem>
      <a href="#element-id-1">
        <span>Label</span>
        <AnchorBarListItemDescription>Description</AnchorBarListItemDescription>
      </a>
    </AnchorBarListItem>
    <AnchorBarListItem>
      <a href="#element-id-2">
        <span>Label</span>
        <AnchorBarListItemDescription>Description</AnchorBarListItemDescription>
      </a>
    </AnchorBarListItem>
    <AnchorBarListItem>
      <a href="#element-id-3">
        <span>Label</span>
        <AnchorBarListItemDescription>Description</AnchorBarListItemDescription>
      </a>
    </AnchorBarListItem>
  </AnchorBarList>
</AnchorBar>

<AnchorBar>
  <AnchorBarList>
    <AnchorBarListItem>
      <a href="#element-id-1">
        <span>Label</span>
        <AnchorBarListItemDescription>Description</AnchorBarListItemDescription>
      </a>
    </AnchorBarListItem>
    <AnchorBarListItem>
      <a href="#element-id-2">
        <span>Label</span>
        <AnchorBarListItemDescription>Description</AnchorBarListItemDescription>
      </a>
    </AnchorBarListItem>
    <AnchorBarListItem>
      <a href="#element-id-3">
        <span>Label</span>
        <AnchorBarListItemDescription>Description</AnchorBarListItemDescription>
      </a>
    </AnchorBarListItem>
  </AnchorBarList>
</AnchorBar>

<div role="navigation" class="swan-anchor-bar">
  <ul role="list" class="swan-anchor-bar-list swan-list swan-list-skin-minimal">
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor1">
        Label
        <span class="swan-anchor-bar-list-item-description">Description</span>
      </a>
    </li>
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor2">
        Label
        <span class="swan-anchor-bar-list-item-description">Description</span>
      </a>
    </li>
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor3">
        Label
        <span class="swan-anchor-bar-list-item-description">Description</span>
      </a>
    </li>
  </ul>
</div>

<div role="navigation" class="swan-anchor-bar">
  <ul role="list" class="swan-anchor-bar-list swan-list swan-list-skin-minimal">
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor1">
        Label
        <span class="swan-anchor-bar-list-item-description">Description</span>
      </a>
    </li>
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor2">
        Label
        <span class="swan-anchor-bar-list-item-description">Description</span>
      </a>
    </li>
    <li class="swan-anchor-bar-list-item">
      <a href="#anchor3">
        Label
        <span class="swan-anchor-bar-list-item-description">Description</span>
      </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. When using sticky, use onActiveAnchorChanged in combination with aria-current on list items to show the currently active list 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.

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

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

  return (
    <>
      <AnchorBar sticky onActiveAnchorChanged={setActiveAnchor}>
        <AnchorBarList>
          <AnchorBarListItem>
            <a
              href="#element-id-1"
              aria-current={
                activeAnchor === 'element-id-1' ? 'true' : undefined
              }
            >
              Label
            </a>
          </AnchorBarListItem>
          <AnchorBarListItem>
            <a
              href="#element-id-2"
              aria-current={
                activeAnchor === 'element-id-2' ? 'true' : undefined
              }
            >
              Label
            </a>
          </AnchorBarListItem>
          <AnchorBarListItem>
            <a
              href="#element-id-3"
              aria-current={
                activeAnchor === 'element-id-3' ? 'true' : undefined
              }
            >
              Label
            </a>
          </AnchorBarListItem>
          <AnchorBarListItem>
            <a
              href="#element-id-4"
              aria-current={
                activeAnchor === 'element-id-4' ? 'true' : undefined
              }
            >
              Label
            </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 sticky onActiveAnchorChanged={setActiveAnchor}>
        <AnchorBarList>
          <AnchorBarListItem>
            <a
              href="#element-id-1"
              aria-current={
                activeAnchor === 'element-id-1' ? 'true' : undefined
              }
            >
              Label
            </a>
          </AnchorBarListItem>
          <AnchorBarListItem>
            <a
              href="#element-id-2"
              aria-current={
                activeAnchor === 'element-id-2' ? 'true' : undefined
              }
            >
              Label
            </a>
          </AnchorBarListItem>
          <AnchorBarListItem>
            <a
              href="#element-id-3"
              aria-current={
                activeAnchor === 'element-id-3' ? 'true' : undefined
              }
            >
              Label
            </a>
          </AnchorBarListItem>
          <AnchorBarListItem>
            <a
              href="#element-id-4"
              aria-current={
                activeAnchor === 'element-id-4' ? 'true' : undefined
              }
            >
              Label
            </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.

prop	type	required	default
`sticky` 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	`booleannull`	false	false
`onActiveAnchorChanged` 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	`((...args: any[]) => any)null`	false	null

Use Anchor Bar...

Don't use Anchor Bar...

List Item Description

Sticky

Background color

Number of links

Character count

Props

Related