Health Design System

Inpage Nav

In page nav

⭐ Design System - Inpage nav

Dynamic generation

Rather than outputting the markup for the in page nav, this function will automatically identify all the H2’s and generate the navigation based on that.

  /**
   * Dynamically generate the in page nav links.
   *
   * Will only look for and link to H2's.
   *
   * @param selector
   *   The area to look for the links, in a jQuery selector.
   */
  health.inpagenav(selector);

Requires the anchorific library, available in the build/js/libraries folder.

<nav class="au-inpage-nav-links" aria-label="On this page">
    <div class="au-inpage-nav-links__heading">On this page</div>
    <ul>
        <li><a href="#description">Description</a></li>
        <li><a href="#what-can-you-disclose">History of research</a></li>
        <li><a href="#who-can-make-a-disclosure">Amazing facts</a></li>
        <li><a href="#how-to-make-a-disclosure">Getting away from a Tyrannosaurus rex</a></li>
        <li><a href="#what-happens-next">Glossary</a></li>
        <li><a href="#contact">References</a></li>
    </ul>
</nav>