Overview

Inpage navigation helps users scan the contents of a page and navigate to different sections of the page.

Code

<nav class="qg-inpage-nav" aria-label="on this page navigation">
  <h2 class="qg-inpage-nav_heading">On this page</h2>
  <ul class="qg-inpage-nav_list">
    <li>
      <a href="#one" title="Section one">
        Section one
      </a>
    </li>
    <li>
      <a href="#two" title="Section two">
        Section two
      </a>
    </li><li>
      <a href="#three" title="Section three">
        Section three
      </a>
    </li><li>
      <a href="#four" title="Section four">
        Section four
      </a>
    </li>
  </ul>
</nav>

<!-- Section -->
<div id="one">
  <h3>Section one</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet aspernatur cumque debitis dignissimos eligendi eveniet illo, illum incidunt ipsam nesciunt nihil officiis quaerat quam quod quos ullam ut, veritatis.</p>
</div>