Step by step navigation example

With optional steps

Steps can be optional. This is controlled by two parameters, ‘optional’ and ‘logic’.

• Optional steps used to have a dotted line down the side but this was removed as it confused users
• Logic will change the number next to a step to the word ‘and’ or the word ‘or’

If a step is optional this should be conveyed by the text within that step.

How it looks (preview)

1. Step 1: Drive to work

   If you do not have a car, you will need to choose an alternative.

2. or Walk to work

   Walking is healthy but may not be practical where large distances are concerned.

3. or Get public transport to work

   Public transport includes buses, trains and boats.

4. Step 2: Do work

   Once you have reached your destination you should be able to start work.

5. and Get paid

   Your employer should pay you for hours worked.

How to call this example

<%= render "govuk_publishing_components/components/step_by_step_nav", {
  steps: [
    {
      title: "Drive to work",
      contents: [
        {
          type: "paragraph",
          text: "If you do not have a car, you will need to choose an alternative."
        }
      ]
    },
    {
      title: "Walk to work",
      optional: true,
      logic: "or",
      contents: [
        {
          type: "paragraph",
          text: "Walking is healthy but may not be practical where large distances are concerned."
        }
      ]
    },
    {
      title: "Get public transport to work",
      optional: true,
      logic: "or",
      contents: [
        {
          type: "paragraph",
          text: "Public transport includes buses, trains and boats."
        }
      ]
    },
    {
      title: "Do work",
      contents: [
        {
          type: "paragraph",
          text: "Once you have reached your destination you should be able to start work."
        }
      ]
    },
    {
      title: "Get paid",
      logic: "and",
      contents: [
        {
          type: "paragraph",
          text: "Your employer should pay you for hours worked."
        }
      ]
    }
  ]
} %>