Ordered multi-page navigation - Canada.ca design pattern

The ordered multi-page navigation pattern:

  • is a set of links to a group of several pages intended to be read in a preferred order
  • includes previous/next links to guide a person through the page set in the preferred order

Objective

Use the ordered multi-page navigation pattern to provide:

  • an outline of content that spans multiple pages and has a default or preferred order (for example, guides, service initiations, sequential instructions)
  • a method of jumping to any page within the sequence, bypassing the default order of the pages

Do not use this pattern when:

  • the content exists as a single page requiring scrolling to view all the subsections (use the In-page table of contents pattern)
  • the content exists as a set of multiple pages that does not have a default or preferred order
  • the default order of the content must not be circumvented that is when the preferred order is crucial and people cannot be permitted to move between pages in a different order

How and when to use ordered multi-page navigation

  • Always position the ordered multi-page navigation pattern at the start of the page, before the substantive content of the page begins
  • Ensure that the order and position of the page links are identical on each page of the set
  • Number the step-by-step links to indicate the preferred order. Not all links necessarily need to be numbered, if they represent pages/steps that are not part of the sequence
  • Highlight the link for the current page. Do not highlight with the same colour used on primary action buttons
  • Position previous/next links immediately below the substantive content on the page
  • Accompany the previous/next labels with arrow icons to reinforce the concept
  • Position previous/next links consistently (for example, “previous” on the left, “next” on the right)
  • On the first page of the document, omit the “previous” link; on the last page of the document, omit the “next” link
Ordered multi-page navigation pattern
Image of ordered multi-page navigation pattern. Details on this graphic can be found in the surrounding text.
Date modified: