On-page Menu

The on-page menu is a quick jump on page navigation to quickly move users to headings or sections on the page. It is generated automatically only requiring a few classes to indicate where to place it and what to include.

Usage

To set the container you want the on-page menu to be inserted into, simply add .show-onpage-menu to a div. I would recommend your typical sidebar area.

HTML

<div class="show-onopage-menu"></div>

Next you need to identify which headings you want to be added as links to your on-page menu. You don't have to include an id attribute on your heading tag, it will be created automatically if 1 doesn't exist.

One important note, your h2 tags must be inside of an article tag

HTML

<article>
  <h2 data-onpage-link="true">Add to on-page menu</h2>
</article>

Rendered component

HTML

<nav id="onpage-menu--section--student-policies" class="onpage-menu affix-ready" data-toggle="affix" data-affix-type="position" data-affix-container="#section--student-policies" data-affix-offset="50" data-affix-breakpoint="768" aria-label="Quickly navigate page through secondary headings" style="inset: auto; width: auto;">
  <ol class="nav d-flex flex-column">
    <li class="nav-item text-nowrap">
      <span class="nav-link on-this-page">
        <span class="me-2 fas fa-chevron-down d-inline-block d-md-none"></span>
        <em>On this page…</em>
      </span>
    </li>
    <li class="nav-item">
      <a class="nav-link anchor-scroll" href="#link-id">
        <span class="sr-only">Quick jump to </span>
        Heading 1
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link anchor-scroll" href="#link-id">
        <span class="sr-only">Quick jump to</span>
        Heading 2
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link anchor-scroll" href="#link-id">
        <span class="sr-only">Quick jump to</span>
        Heading 3
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link anchor-scroll" href="#link-id">
        <span class="sr-only">Quick jump to </span>
        Heading 4
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link anchor-scroll" href="#link-id">
        <span class="sr-only">Quick jump to </span>
        Heading 5
      </a>
    </li>
  </ol>
</nav>