In-page nav

The in-page nav (or page contents as it is sometimes called) is placed above main content of a page and provides navigation to individual anchor links located in the main content.

<div class="nsw-container">
	<nav class="nsw-page-nav" aria-labelledby="in-page-nav">
	  <h2 id="in-page-nav" class="nsw-page-nav__title">On this page</h2>
	  <ul class="nsw-page-nav__list">
	      <li class="nsw-page-nav__list-item">
	        <a href="#id1" class="nsw-page-nav__link">Section 1</a>
	      </li>
	      <li class="nsw-page-nav__list-item">
	        <a href="#id2" class="nsw-page-nav__link">Section 2</a>
	      </li>
	      <li class="nsw-page-nav__list-item">
	        <a href="#id3" class="nsw-page-nav__link">Section 3</a>
	      </li>
	      <li class="nsw-page-nav__list-item">
	        <a href="#id4" class="nsw-page-nav__link">Section 4</a>
	      </li>
	  </ul>
	</nav>
</div>

 

Copy

The In-page nav pattern helps users scan the section names of a page and navigate to different sections of the page.

The lefthand highlight is intended to visually separate the component from the actual content on a page and bind the elements together.

Use at the top of the page before the main content.

The highlight bar can be changed to your brand colour, if brand exemption has been approved.

You will need to change the nsw-primary-highlight colour in the _settings.scss file.


$nsw-primary-highlight: #D7153A !default;

In-page nav example