Direction links
Direction links show users how to navigate through a page or process. The direction of the arrow provides a visual cue as to the direction, which is supported by the text.
Default
Direction links comprise of bold text and an arrow indicating the direction.
<div class="nsw-container">
<a class="nsw-direction-link" href="#">
<svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
<use xlink:href="#arrow"></use>
</svg>
<span class="nsw-direction-link__text">Back <span class="sr-only">a page</span>
</span>
</a>
<a class="nsw-direction-link" href="#">
<span class="nsw-direction-link__text">Bottom <span class="sr-only">of page</span>
</span>
<svg class="nsw-icon nsw-icon--rotate-90" focusable="false" aria-hidden="true">
<use xlink:href="#arrow"></use>
</svg>
</a>
<a class="nsw-direction-link" href="#">
<span class="nsw-direction-link__text">Top <span class="sr-only">of page</span>
</span>
<svg class="nsw-icon nsw-icon--rotate-270" focusable="false" aria-hidden="true">
<use xlink:href="#arrow"></use>
</svg>
</a>
<a class="nsw-direction-link" href="#">
<span class="nsw-direction-link__text">Next <span class="sr-only">page</span>
</span>
<svg class="nsw-icon" focusable="false" aria-hidden="true">
<use xlink:href="#arrow"></use>
</svg>
</a>
</div>
Direction links have arrows to help users quickly understand what will happen when they click on a link. They help support the mental model the user has of moving through a flow, or around a page.
Use direction links to suggest the direction:
- up or down a page
- through a process
- back to main content