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