Inpage navigation
Overview
Inpage navigation helps users scan the contents of a page and navigate to different sections of the page.
Default
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>