1. Government Frontend Component Guide
  2. Step by step navigation related links

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 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

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

With unique tracking (preview)

In order to identify the step by step navigation the component is part of, we need to track a unique ID of the navigation in Google Analytics. This ID should be the same across all pages that are linked from and are part of that navigation. Its value is included in any tracking events, specifically in dimension96. It refers to the ID of the step nav that the component links to. Where there are multiple links, they will have different tracking IDs.

<%= render "govuk_publishing_components/components/step_by_step_nav_related", {
  links: [
    {
      href: "#",
      text: "With a tracking id",
      tracking_id: "this-is-the-tracking-id"
    }
  ]
} %>

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