Navs

Guidance

Navs provide additional options beyond the main navigation and enable users to move around and find what they need quickly and easily. There are 4 nav types:

• Page nav: Use to provide navigation within the page.
• Side nav: Use to allow users to navigate between related pages.
• Progress steps nav: Use in a multi-step form or checkout process to guide users through each step and indicate their progress.
• Back to top nav: Use on lengthy pages to allow users to return to the top without scrolling manually.

Page nav

This nav is to be used on long-form destination content pages and linked to <h2> level in-page anchor links only.

<nav class="gnb-page-nav">
	<h2>On this page</h2>
	<ul>
		<li><a href="#">Lorem ipsum dolor</a></li>
		<li><a href="#">Lorem ipsum dolor sit amet</a></li>
		<li><a href="#">Lorem ipsum sit amet</a></li>
		<li><a href="#">Lorem ipsum</a></li>
	</ul>
</nav>

Side nav

Side nav displays a user’s current position in the content hierarchy in levels lower than the main nav and allows them to move between pages of related content.

One level

<nav class="gnb-side-nav">
	<h2>Nav heading</h2>
	<ul>
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li class="active"><a href="#">Active list item</a></li>
		<li><a href="#">List item</a></li>
	</ul>
</nav>

Two levels

<nav class="gnb-side-nav">
	<h2>Nav heading</h2>
	<ul>
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li class="current"><a href="#">Parent item</a>
			<ul>
				<li><a href="#">List item</a></li>
				<li><a href="#">List item</a></li>
				<li class="active"><a href="#">Active list item</a></li>
				<li><a href="#">List item</a></li>
			</ul>
		</li>
		<li><a href="#">List item</a></li>
	</ul>
</nav>

Progress steps nav

Use progress steps nav to create a journey for the user as they navigate a process.

Numbered steps

<nav class="gnb-progress-steps-nav">
	<h2>Nav heading</h2>
	<ul class="gnb-progress-steps-circle">
		<li class="complete">
			<div><a href="#">1. Step one title</a></div>
		</li>
		<li class="complete">
			<div><a href="#">2. Step two title</a></div>
		</li>
		<li class="current">
			<div>3. Step three title</div>
		</li>
		<li>
			<div>4. Step four title</div>
		</li>
	</ul>
</nav>

Title and description

<nav class="gnb-progress-steps-nav">
	<h2>Nav heading</h2>
	<ul class="gnb-progress-steps-circle">
		<li class="complete">
			<div>
				<h3><a href="#">Step one title</a></h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
			</div>
		</li>
		<li class="current">
			<div>
				<h3>Step two title</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
			</div>
		</li>
		<li>
			<div>
				<h3>Step three title</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
			</div>
		</li>
	</ul>
</nav>

Sticky back to top nav

This nav is to be used on long-form destination content pages. It allows you to have a link back to the top of the page on the screen as users scroll, eliminating the need to have duplicate "back to top" links scattered throughout your page content.

The sticky top button is fixed to the bottom right of the screen and appears on scroll.

By default gnb-sticky-top is hidden. If you are working on something that does not support javascript, you can change the button id to gnb-sticky-top-static to make it visible.

This can only be used once per page.

<!-- Add this at the bottom of your content just before </main> -->
<button id="gnb-sticky-top">
	<span>Back to top</span>
</button>

<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-sticky-top-1.0.0.js"></script>