1. Static Component Guide
  2. Previous and next navigation

Component

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 "govuk_component/previous_and_next_navigation" {
  previous_page: {
    url: "previous-page",
    title: "Previous page",
    label: "1 of 3"
  }
} %>

How it looks

Other examples (preview all)

Only next (preview)

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

Both previous and next (preview)

<%= render "govuk_component/previous_and_next_navigation" {
  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 "govuk_component/previous_and_next_navigation" {
  previous_page: {
    url: "previous-page",
    title: "Previous page"
  },
  next_page: {
    url: "next-page",
    title: "Next page"
  }
} %>

Become a lorry bus driver example (preview)

<%= render "govuk_component/previous_and_next_navigation" {
  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"
  }
} %>