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="#">
<i class="material-icons nsw-material-icons nsw-material-icons--rotate-180" focusable="false" aria-hidden="true">east</i>
<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>
<i class="material-icons nsw-material-icons nsw-material-icons--rotate-90" focusable="false" aria-hidden="true">east</i>
</a>
<a class="nsw-direction-link" href="#">
<span class="nsw-direction-link__text">Top <span class="sr-only">of page</span>
</span>
<i class="material-icons nsw-material-icons nsw-material-icons--rotate-270" focusable="false" aria-hidden="true">east</i>
</a>
<a class="nsw-direction-link" href="#">
<span class="nsw-direction-link__text">Next <span class="sr-only">page</span>
</span>
<i class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">east</i>
</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