Skip links and keyboard navigation

Section navigation

Overview

The section navigation contains links to other pages in the same information architecture context/level as the current page the user is on.

All topic index pages and standard content pages should include section navigation. If your page doesn't need it (e.g. application page template), you can delete the entire block and the template will adapt automatically.

Default

See an example on the left of this page on a larger screen or towards the bottom of this page on a smaller screen.

View example in Storybook

Code

<nav class="qg-section-nav" role="navigation" aria-label="side">
    <h2>
        <a href="#">Parent page for section tree </a>
    </h2>
    <ul aria-label="section navigation">
        <li>
            <a href="#">At least one sub page</a>
        </li>
        <li>
            <a href="#">A second sub page</a>
        </li>
        <li>
            <a href="#">A third one sub page</a>
        </li>
    </ul>
</nav>