Previous and next navigation

Navigational links that allow users navigate within a series of pages or elements.

This component accepts 2 optional parameters, previous and next.

Each optional parameter accepts:

  • an URL for the link
  • a title for the URL
  • a label that can add extra info (ie page number) that will be displayed under the title

If one of the 2 parameters is nil, no link will appear.

How to call this component

<%= render partial: 'govuk_component/previous_and_next_navigation', locals: { previous_page: { url: "previous-page", title: "Previous page", label: "1 of 3" } } %>

How this component looks

Other examples (preview all)

Only next (preview)

<%= render partial: 'govuk_component/previous_and_next_navigation', locals: { next_page: { url: "next-page", title: "Next page", label: "Tax disc" } } %>

Both previous and next (preview)

<%= render partial: 'govuk_component/previous_and_next_navigation', locals: { previous_page: { url: "previous-page", title: "Previous page", label: "1 of 3" }, next_page: { url: "next-page", title: "Next page", label: "3 of 3" } } %>

Both previous and next no labels (preview)

<%= render partial: 'govuk_component/previous_and_next_navigation', locals: { previous_page: { url: "previous-page", title: "Previous page" }, next_page: { url: "next-page", title: "Next page" } } %>

Become a lorry bus driver example (preview)

<%= render partial: 'govuk_component/previous_and_next_navigation', locals: { previous_page: { url: "previous-page", title: "Previous", label: "Applying for a provisional lorry or bus licence" }, next_page: { url: "next-page", title: "Next", label: "Driver CPC part 1 test: theory" } } %>