Step by step navigation example

Or then

Some of the more complex things in a step by step navigation require an option for laying out links in a clear structure. If a link in a list is not given a href, only the text is displayed, allowing for structures like the one shown below.

How it looks (preview)

1. Step 1: Get a court to decide your child arrangements

   You can only apply for a court to make a decision if you've tried mediation or your family are at risk, for example domestic abuse.

   1. Hire a lawyer to represent you £110 to £410 per hour
   2. or
   3. Represent yourself in court

   then

   1. Apply for a court order £215
   2. Find the right court to send your application
   3. Get help with court fees

   The court will send you a date for your first hearing 4 to 6 weeks after your application. You'll be told when and where your hearing will take place.

How to call this example

<%= render "govuk_publishing_components/components/step_by_step_nav", {
  show_step: 1,
  steps: [
    {
      title: "Get a court to decide your child arrangements",
      contents: [
        {
          type: "paragraph",
          text: "You can only apply for a court to make a decision if you've tried mediation or your family are at risk, for example domestic abuse."
        },
        {
          type: "list",
          contents: [
            {
              href: "http://solicitors.lawsociety.org.uk/",
              text: "Hire a lawyer to represent you",
              context: sanitize("&pound;110 to &pound;410 per hour")
            },
            {
              text: "or"
            },
            {
              href: "http://localhost:3000/represent-yourself-in-court",
              text: "Represent yourself in court"
            }
          ]
        },
        {
          type: "paragraph",
          text: "then"
        },
        {
          type: "list",
          contents: [
            {
              href: "/looking-after-children-divorce/apply-for-court-order",
              text: "Apply for a court order",
              context: sanitize("&pound;215")
            },
            {
              href: "https://courttribunalfinder.service.gov.uk/search/",
              text: "Find the right court to send your application"
            },
            {
              href: "/get-help-with-court-fees",
              text: "Get help with court fees"
            }
          ]
        },
        {
          type: "paragraph",
          text: "The court will send you a date for your first hearing 4 to 6 weeks after your application. You'll be told when and where your hearing will take place."
        }
      ]
    }
  ]
} %>