Health Design System

Inpage Nav: Dynamic

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>
</nav>

<h2>First heading 2</h2>

<h3>H3 headings are not added</h3>

<p>
    Tyrannosaurus Rex was one of the largest land carnivores of all time. One of the largest and the most complete
    specimen, nicknamed Sue (FMNH PR2081), is located at the Field Museum of Natural History. Sue measured 12.8
    meters (42 ft) long,was 3.66 meters (12 ft) tall at the hips, and according to the most recent
    studies, using a variety of techniques, estimated to have weighed between 8.4 metric tons (9.3 short tons) to 14
    metric tons (15.4 short tons).
</p>

<h2>Second heading 2</h2>

<p>
    Tyrannosaurus Rex was one of the largest land carnivores of all time. One of the largest and the most complete
    specimen, nicknamed Sue (FMNH PR2081), is located at the Field Museum of Natural History. Sue measured 12.8
    meters (42 ft) long,was 3.66 meters (12 ft) tall at the hips, and according to the most recent
    studies, using a variety of techniques, estimated to have weighed between 8.4 metric tons (9.3 short tons) to 14
    metric tons (15.4 short tons).
</p>

<h2>Third heading 2</h2>

<p>
    Tyrannosaurus Rex was one of the largest land carnivores of all time. One of the largest and the most complete
    specimen, nicknamed Sue (FMNH PR2081), is located at the Field Museum of Natural History. Sue measured 12.8
    meters (42 ft) long,was 3.66 meters (12 ft) tall at the hips, and according to the most recent
    studies, using a variety of techniques, estimated to have weighed between 8.4 metric tons (9.3 short tons) to 14
    metric tons (15.4 short tons).
</p>

<h2>Fourth heading 2</h2>

<p>
    Tyrannosaurus Rex was one of the largest land carnivores of all time. One of the largest and the most complete
    specimen, nicknamed Sue (FMNH PR2081), is located at the Field Museum of Natural History. Sue measured 12.8
    meters (42 ft) long,was 3.66 meters (12 ft) tall at the hips, and according to the most recent
    studies, using a variety of techniques, estimated to have weighed between 8.4 metric tons (9.3 short tons) to 14
    metric tons (15.4 short tons).
</p>

<script language="JavaScript">
    $(document).ready(function() {
        health.inpagenav('body');
    });
</script>