Step by step navigation example

With links

Links can have the following attributes:

  • style, an attribute on the parent list that controls its appearance. Defaults to optional but can be set to ‘choice’ (adds indent and bullets to the list)
  • context, an optional text field to show some extra information after the link, usually a monetary value
  • active, whether to make the link highlighted (to indicate the current page)
  • highlight_step, a general option to highlight the step. Usually the active link would be in the active step, but in some circumstances there might be an active step but no highlighted link.

How it looks (preview)

  1. Step 1 Links and paragraphs

    These links represent tasks that are required.

    Spacing between a paragraph and a list of links should be smaller than the spacing between two paragraphs, in order to visually connect the two.

    1. Obtain a driving licence prior to driving a car
    2. Acquire food before attempting to cook 1p to £20
    3. Maintain contact with the ground at all times

    These links represent a choice:

  2. Step 2 Active step and links

    1. Check the reasons
    2. You are currently viewing: Make the decisions based on available data and the reasonable assumptions that are possible at the time 1p to £20
    3. Do the things

How to call this example

<%= render "govuk_publishing_components/components/step_by_step_nav", {
  highlight_step: 2,
  show_step: 2,
  steps: [
    {
      title: "Links and paragraphs",
      contents: [
        {
          type: "paragraph",
          text: "These links represent tasks that are required."
        },
        {
          type: "paragraph",
          text: "Spacing between a paragraph and a list of links should be smaller than the spacing between two paragraphs, in order to visually connect the two."
        },
        {
          type: "list",
          contents: [
            {
              href: "/component-guide/step_by_step_navigation/with_links/preview",
              text: "Obtain a driving licence prior to driving a car"
            },
            {
              href: "/component-guide/step_by_step_navigation/with_links/preview",
              text: "Acquire food before attempting to cook",
              context: sanitize("1p to &pound;20")
            },
            {
              href: "/component-guide/step_by_step_navigation/with_links/preview",
              text: "Maintain contact with the ground at all times"
            }
          ]
        },
        {
          type: "paragraph",
          text: "These links represent a choice:"
        },
        {
          type: "list",
          style: "choice",
          contents: [
            {
              href: "/component-guide/step_by_step_navigation/",
              text: "Leave school at sixteen"
            },
            {
              href: "/component-guide/step_by_step_navigation/",
              text: "Continue into higher education",
              context: sanitize("&pound;9,500")
            }
          ]
        }
      ]
    },
    {
      title: "Active step and links",
      contents: [
        {
          type: "list",
          contents: [
            {
              href: "/component-guide/step_by_step_navigation/",
              text: "Check the reasons"
            },
            {
              href: "/component-guide/step_by_step_navigation/with_links/preview",
              text: "Make the decisions based on available data and the reasonable assumptions that are possible at the time",
              context: sanitize("1p to &pound;20"),
              active: true
            },
            {
              href: "/component-guide/step_by_step_navigation/with_links/preview",
              text: "Do the things"
            }
          ]
        }
      ]
    }
  ]
} %>