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"
  }
} %>