Component

Previous and next navigation

Navigational links that allow users to 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.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/previous_and_next_navigation", {
  previous_page: {
    url: "previous-page",
    title: "Previous page",
    label: "1 of 3"
  }
} %>

Accessibility acceptance criteria

Icons in the component must not be announced by screen readers.

The component must:

  • identify itself as pagination navigation
  • provide a distinction between the navigation text and label text of the links both visually and for screenreaders

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

Only next (preview)

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

Both previous and next (preview)

<%= render "govuk_publishing_components/components/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_publishing_components/components/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_publishing_components/components/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"
  }
} %>

Without ga4 tracking (preview)

Disables the GA4 link tracker on the links. Tracking is enabled by default.

<%= render "govuk_publishing_components/components/previous_and_next_navigation", {
  disable_ga4: true,
  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"
  }
} %>