Component

Step by step navigation related links

Links to step by step navigations that a page is part of

The component is designed to go on a content page to accompany a small step by step navigation in a sidebar. It provides links to one or more step by step navigation pages.

The component has two uses:

above the step by step navigation sidebar, it provides a link to the main step by step navigation
below the step by step navigation sidebar, it shows and links to any other step by step navigations that this page belongs to

In the first use case, only one link should be present and the entire text of the component should be contained in a heading. In the second use case, if more than one link is provided, the links should be shown in a list, separate from the heading.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/step_by_step_nav_related", {
  links: [
    {
      href: "/learn-to-drive-a-car",
      text: "Learn to drive a car: step by step"
    }
  ]
} %>

Accessibility acceptance criteria

The component must:

display a single link as part of a heading
display multiple links outside of a heading in a separate list

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

With more than one link (preview)

If more than one link is passed to the component it should output them as a list outside of the heading.

<%= render "govuk_publishing_components/components/step_by_step_nav_related", {
  links: [
    {
      href: "/learn-to-drive-a-car",
      text: "Learn to drive a car: step by step"
    },
    {
      href: "/learn-to-drive-a-motorbike",
      text: "Learn to drive a motorbike: step by step"
    }
  ]
} %>

With a different title (preview)

The default title ‘Part of’ can be replaced if required.

<%= render "govuk_publishing_components/components/step_by_step_nav_related", {
  pretitle: "Also part of",
  links: [
    {
      href: "/learn-to-drive-a-car",
      text: "Learn to drive a car: step by step"
    },
    {
      href: "/learn-to-drive-a-motorbike",
      text: "Learn to drive a motorbike: step by step"
    }
  ]
} %>

Always display as a list (preview)

when this component is rendered alongside an expanded step by step, we want it to render as a heading. However, in some cases the component will not be followed by a step by step, for example Book Driving Test. In these cases, the heading is not followed by any content, so it should be rendered as a list instead.

<%= render "govuk_publishing_components/components/step_by_step_nav_related", {
  pretitle: "Also part of",
  always_display_as_list: true,
  links: [
    {
      href: "/learn-to-drive-a-motorbike",
      text: "Learn to drive a motorbike: step by step"
    }
  ]
} %>

Without ga4 tracking (preview)

Disables GA4 tracking on the component. Tracking is enabled by default. This includes the ga4-link-tracker module and data-ga4-link attributes. See the ga4-link-tracker docs for more information.

<%= render "govuk_publishing_components/components/step_by_step_nav_related", {
  disable_ga4: true,
  pretitle: "Example pretitle",
  links: [
    {
      href: "#",
      text: "With ga4 tracking"
    }
  ]
} %>