Direction links

By digitalnsw_service on Mon, 01/06/2020 - 11:44

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>

 

Copy

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