Overview
Overview
In-page navigation is a vertical list of links that helps users quickly scan and navigate to different content sections on a page.
The in-page navigation is placed above the main content section of a page. It provides navigation to individual anchor links located in the page content.
Example
<!-- In-page navigation component -->
<!-- Wrap the entire component in a <nav> element with a class and an aria-label attribute to describe its purpose -->
<nav class="qld__inpage-nav-links" aria-label="In page navigation">
<!-- Add a heading to provide a label for the in-page navigation -->
<h2 class="qld__inpage-nav-links__heading">
On this page
</h2>
<!-- Use an unordered list with a class for styling to list the navigation links -->
<ul class="qld__link-list">
<!-- For each navigation link, create a list item with an anchor tag -->
<li><a href="#visiting-hours">Visiting hours</a></li>
<li><a href="#what-to-bring">What can I bring to hospital?</a></li>
<li><a href="#hand-hygiene">Hand hygiene</a></li>
<li><a href="#if-unwell">If you're unwell</a></li>
<li><a href="#facilities">Our hospitals, health centers, and residential aged care facilities</a></li>
</ul>
</nav>
<!-- End of in-page navigation component -->
Usage guidelines
When to use
- As a table of contents on lengthy pages to provide a structural overview and allow users to jump directly to specific content sections.
When not to use
- To link to other pages or external websites - use text links or link columns instead.
- On pages with minimal content or a small number of sections, where scrolling isn't an issue.
How to use
Position the in-page navigation component above the main content of the page to ensure visibility and easy access. Ensure the anchor link text and heading/title it links to are the same.
Consider how your content is organised and what heading levels should be included in your in-page navigation. For example, if your content is primarily organised into sections with H2 headings and there are no significant subsections, then including only H2 headings in the in-page navigation might be sufficient.
Generally, it's not recommended to include heading levels lower than H3 (such as H4, H5, or H6) in the in-page navigation, as this can make the navigation too complex and challenging to use.