Anchor navigation

How it works

Navigation toggles the .active class on anchor (<a>) elements when the element with the id referenced by the anchor’s href is scrolled into view. Anchor navigation is best used in conjunction with a Bootstrap nav component or list group, but it will also work with any anchor elements in the current page. Here’s how it works.

• To start, anchor navigation requires two things: a navigation, list group, or a simple set of links, plus a collection of sections to scroll to.

• On the navigation container, add data-of-anchor-navigation. If there is no focusable element inside the element, be sure to also include a tabindex="0" to ensure keyboard access.

• As you scroll the window, an .active class is added and removed from anchor links within the associated navigation. Links must have resolvable id targets, otherwise they’re ignored. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>

• Target elements that are not visible will be ignored. See the Non-visible elements section below.

Example

For the working example, please refer to the One pager example.

Here is the example markup that needs to be generated:

<nav role="navigation" data-of-anchor-navigation>
  <ul class="nav nav-underline nav-fill nav-nowrap" data-of-scroll-shadow>
    <li class="nav-item">
      <a class="nav-link" href="#section-1">Section 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section-2">Section 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section-3">Section 3</a>
    </li>
  </ul>
</nav>

<div id="section-1" tabindex="-1">…</div>
<div id="section-2" tabindex="-1">…</div>
<div id="section-3" tabindex="-1">…</div>

Usage

Markup

The required markup for a ticker is only a data attribute and CSS class on the HTML element:

<nav data-of-anchor-navigation></nav>

Via JavaScript

Create a anchor navigation with a single line of JavaScript:

const anchorNavigation = await openFrontend.AnchorNavigation.then(component => component.getOrCreateInstance(document.getElementById('anchor-navigation'), options))

// or
const anchorNavigationAlternative = await openFrontend.AnchorNavigation.then(component => component.getOrCreateInstance('#anchor-navigation', options))

Options

You can pass extra options as JSON value of the data attribute. Here is the list of all available options (alphabetically):

Events

const element = document.getElementById('anchor-navigation')

element.addEventListener('initialized.of.anchor_navigation', () => {
  // do something
})