Service navigation examples

• # default

  Open this example in a new tab

  {
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      },
      {
        "href": "#/3",
        "text": "Navigation item 3"
      },
      {
        "href": "#/4",
        "text": "Navigation item 4"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      },
      {
        "href": "#/3",
        "text": "Navigation item 3"
      },
      {
        "href": "#/4",
        "text": "Navigation item 4"
      }
    ]
  }) }}
          

• # with navigation with a current item

  Open this example in a new tab

  {
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2",
        "current": true
      },
      {
        "href": "#/3",
        "text": "Navigation item 3"
      },
      {
        "href": "#/4",
        "text": "Navigation item 4"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2",
        "current": true
      },
      {
        "href": "#/3",
        "text": "Navigation item 3"
      },
      {
        "href": "#/4",
        "text": "Navigation item 4"
      }
    ]
  }) }}
          

• # with large navigation

  Open this example in a new tab

  {
    "navigation": [
      {
        "href": "#/browse/benefits",
        "text": "Benefits"
      },
      {
        "href": "#/browse/births-deaths-marriages",
        "text": "Births, deaths, marriages and care"
      },
      {
        "href": "#/browse/business",
        "text": "Business and self-employed"
      },
      {
        "href": "#/browse/childcare-parenting",
        "text": "Childcare and parenting"
      },
      {
        "href": "#/browse/citizenship",
        "text": "Citizenship and living in the UK"
      },
      {
        "href": "#/browse/justice",
        "text": "Crime, justice and the law"
      },
      {
        "href": "#/browse/disabilities",
        "text": "Disabled people"
      },
      {
        "href": "#/browse/driving",
        "text": "Driving and transport"
      },
      {
        "href": "#/browse/education",
        "text": "Education and learning"
      },
      {
        "href": "#/browse/employing-people",
        "text": "Employing people"
      },
      {
        "href": "#/browse/environment-countryside",
        "text": "Environment and countryside"
      },
      {
        "href": "#/browse/housing-local-services",
        "text": "Housing and local services"
      },
      {
        "href": "#/browse/tax",
        "text": "Money and tax"
      },
      {
        "href": "#/browse/abroad",
        "text": "Passports, travel and living abroad"
      },
      {
        "href": "#/browse/visas-immigration",
        "text": "Visas and immigration"
      },
      {
        "href": "#/browse/working",
        "text": "Working, jobs and pensions"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "navigation": [
      {
        "href": "#/browse/benefits",
        "text": "Benefits"
      },
      {
        "href": "#/browse/births-deaths-marriages",
        "text": "Births, deaths, marriages and care"
      },
      {
        "href": "#/browse/business",
        "text": "Business and self-employed"
      },
      {
        "href": "#/browse/childcare-parenting",
        "text": "Childcare and parenting"
      },
      {
        "href": "#/browse/citizenship",
        "text": "Citizenship and living in the UK"
      },
      {
        "href": "#/browse/justice",
        "text": "Crime, justice and the law"
      },
      {
        "href": "#/browse/disabilities",
        "text": "Disabled people"
      },
      {
        "href": "#/browse/driving",
        "text": "Driving and transport"
      },
      {
        "href": "#/browse/education",
        "text": "Education and learning"
      },
      {
        "href": "#/browse/employing-people",
        "text": "Employing people"
      },
      {
        "href": "#/browse/environment-countryside",
        "text": "Environment and countryside"
      },
      {
        "href": "#/browse/housing-local-services",
        "text": "Housing and local services"
      },
      {
        "href": "#/browse/tax",
        "text": "Money and tax"
      },
      {
        "href": "#/browse/abroad",
        "text": "Passports, travel and living abroad"
      },
      {
        "href": "#/browse/visas-immigration",
        "text": "Visas and immigration"
      },
      {
        "href": "#/browse/working",
        "text": "Working, jobs and pensions"
      }
    ]
  }) }}
          

• # with HTML navigation items

  Open this example in a new tab

  {
    "navigation": [
      {
        "href": "#/1",
        "html": "<em>Navigation item 1</em>"
      },
      {
        "href": "#/2",
        "html": "<em>Navigation item 2</em>"
      },
      {
        "href": "#/3",
        "html": "<em>Navigation item 3</em>"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "navigation": [
      {
        "href": "#/1",
        "html": "<em>Navigation item 1</em>"
      },
      {
        "href": "#/2",
        "html": "<em>Navigation item 2</em>"
      },
      {
        "href": "#/3",
        "html": "<em>Navigation item 3</em>"
      }
    ]
  }) }}
          

• # with non-link navigation items

  Open this example in a new tab

  {
    "navigation": [
      {
        "text": "Navigation item 1"
      },
      {
        "html": "<em>Navigation item 2</em>"
      },
      {
        "text": "Navigation item 3"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "navigation": [
      {
        "text": "Navigation item 1"
      },
      {
        "html": "<em>Navigation item 2</em>"
      },
      {
        "text": "Navigation item 3"
      }
    ]
  }) }}
          

• # with service name

  Open this example in a new tab

  Service name

  {
    "serviceName": "Service name"
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "serviceName": "Service name"
  }) }}
          

• # with service link

  Open this example in a new tab

  Service name

  {
    "serviceName": "Service name",
    "serviceUrl": "#/"
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "serviceName": "Service name",
    "serviceUrl": "#/"
  }) }}
          

• # with long service name

  Open this example in a new tab

  Apply to receive a rare holofoil Charizard Pokémon card from the King

  {
    "serviceName": "Apply to receive a rare holofoil Charizard Pokémon card from the King",
    "serviceUrl": "#/"
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "serviceName": "Apply to receive a rare holofoil Charizard Pokémon card from the King",
    "serviceUrl": "#/"
  }) }}
          

• # with service name and navigation

  Open this example in a new tab

  Apply for a juggling license

  {
    "serviceName": "Apply for a juggling license",
    "serviceUrl": "#/",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#/3",
        "text": "Navigation item 3"
      },
      {
        "href": "#/4",
        "text": "Navigation item 4"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "serviceName": "Apply for a juggling license",
    "serviceUrl": "#/",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#/3",
        "text": "Navigation item 3"
      },
      {
        "href": "#/4",
        "text": "Navigation item 4"
      }
    ]
  }) }}
          

• # inverse

  Open this example in a new tab

  Apply for a juggling license

  {
    "classes": "govuk-service-navigation--inverse",
    "serviceName": "Apply for a juggling license",
    "serviceUrl": "#/",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#/3",
        "text": "Navigation item 3"
      },
      {
        "href": "#/4",
        "text": "Navigation item 4"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "classes": "govuk-service-navigation--inverse",
    "serviceName": "Apply for a juggling license",
    "serviceUrl": "#/",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#/3",
        "text": "Navigation item 3"
      },
      {
        "href": "#/4",
        "text": "Navigation item 4"
      }
    ]
  }) }}
          

• # with collapseNavigationOnMobile set to false

  Open this example in a new tab

  Apply for a juggling license

  {
    "serviceName": "Apply for a juggling license",
    "serviceUrl": "#/",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#/3",
        "text": "Navigation item 3"
      },
      {
        "href": "#/4",
        "text": "Navigation item 4"
      }
    ],
    "collapseNavigationOnMobile": false
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "serviceName": "Apply for a juggling license",
    "serviceUrl": "#/",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#/3",
        "text": "Navigation item 3"
      },
      {
        "href": "#/4",
        "text": "Navigation item 4"
      }
    ],
    "collapseNavigationOnMobile": false
  }) }}
          

• # with a single navigation item

  Open this example in a new tab

  Apply for a juggling license

  {
    "serviceName": "Apply for a juggling license",
    "serviceUrl": "#/",
    "navigation": [
      {
        "href": "#/1",
        "text": "Log out"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "serviceName": "Apply for a juggling license",
    "serviceUrl": "#/",
    "navigation": [
      {
        "href": "#/1",
        "text": "Log out"
      }
    ]
  }) }}
          

• # with a single navigation item and collapseNavigationOnMobile set to true

  Open this example in a new tab

  Apply for a juggling license

  {
    "serviceName": "Apply for a juggling license",
    "serviceUrl": "#/",
    "navigation": [
      {
        "href": "#/1",
        "text": "Log out"
      }
    ],
    "collapseNavigationOnMobile": true
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "serviceName": "Apply for a juggling license",
    "serviceUrl": "#/",
    "navigation": [
      {
        "href": "#/1",
        "text": "Log out"
      }
    ],
    "collapseNavigationOnMobile": true
  }) }}
          

• # with no options set

  Open this example in a new tab

  {}

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({}) }}
          

• # attributes

  Open this example in a new tab

  Service name

  {
    "serviceName": "Service name",
    "attributes": {
      "data-foo": "bar",
      "data-pika": "chu"
    }
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "serviceName": "Service name",
    "attributes": {
      "data-foo": "bar",
      "data-pika": "chu"
    }
  }) }}
          

• # classes

  Open this example in a new tab

  Service name

  {
    "serviceName": "Service name",
    "classes": "app-my-curious-custom-class"
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "serviceName": "Service name",
    "classes": "app-my-curious-custom-class"
  }) }}
          

• # with custom aria-label

  Open this example in a new tab

  Service name

  {
    "serviceName": "Service name",
    "ariaLabel": "Service name and nav"
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "serviceName": "Service name",
    "ariaLabel": "Service name and nav"
  }) }}
          

• # with custom navigation toggle text

  Open this example in a new tab

  {
    "menuButtonText": "Enter the NavZone",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "menuButtonText": "Enter the NavZone",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }) }}
          

• # with custom navigation toggle label

  Open this example in a new tab

  {
    "menuButtonLabel": "Enter the NavZone",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "menuButtonLabel": "Enter the NavZone",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }) }}
          

• # with identical navigation toggle text and label

  Open this example in a new tab

  {
    "menuButtonText": "Enter the NavZone",
    "menuButtonLabel": "Enter the NavZone",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "menuButtonText": "Enter the NavZone",
    "menuButtonLabel": "Enter the NavZone",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }) }}
          

• # with custom navigation label

  Open this example in a new tab

  {
    "navigationLabel": "Main navigation",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "navigationLabel": "Main navigation",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }) }}
          

• # with custom navigation toggle text and navigation label

  Open this example in a new tab

  {
    "menuButtonText": "Enter the NavZone",
    "navigationLabel": "The NavZone",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "menuButtonText": "Enter the NavZone",
    "navigationLabel": "The NavZone",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }) }}
          

• # with custom navigation classes

  Open this example in a new tab

  {
    "navigationClasses": "app-my-neat-navigation-class",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "navigationClasses": "app-my-neat-navigation-class",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }) }}
          

• # with custom navigation ID

  Open this example in a new tab

  {
    "navigationId": "main-nav",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "navigationId": "main-nav",
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }) }}
          

• # with navigation having empty values

  Open this example in a new tab

  {
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      null,
      false,
      "",
      null,
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      null,
      false,
      "",
      null,
      {
        "href": "#/2",
        "text": "Navigation item 2"
      }
    ]
  }) }}
          

• # with navigation having only empty values

  Open this example in a new tab

  {
    "navigation": [
      null,
      false,
      null,
      ""
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "navigation": [
      null,
      false,
      null,
      ""
    ]
  }) }}
          

• # with navigation being an empty array

  Open this example in a new tab

  {
    "navigation": []
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "navigation": []
  }) }}
          

• # with navigation with an active item

  Open this example in a new tab

  {
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#/3",
        "text": "Navigation item 3"
      },
      {
        "href": "#/4",
        "text": "Navigation item 4"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#/3",
        "text": "Navigation item 3"
      },
      {
        "href": "#/4",
        "text": "Navigation item 4"
      }
    ]
  }) }}
          

• # with slotted content

  Open this example in a new tab

  [start]

  [end]

  {
    "slots": {
      "start": "<div>[start]</div>",
      "end": "<div>[end]</div>",
      "navigationStart": "<li>[navigation start]</li>",
      "navigationEnd": "<li>[navigation end]</li>"
    }
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "slots": {
      "start": "<div>[start]</div>",
      "end": "<div>[end]</div>",
      "navigationStart": "<li>[navigation start]</li>",
      "navigationEnd": "<li>[navigation end]</li>"
    }
  }) }}
          

• # rebrand

  Open this example in a new tab

  {
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      },
      {
        "href": "#/3",
        "text": "Navigation item 3"
      },
      {
        "href": "#/4",
        "text": "Navigation item 4"
      }
    ]
  }

  
  {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
  
  {{ govukServiceNavigation({
    "navigation": [
      {
        "href": "#/1",
        "text": "Navigation item 1"
      },
      {
        "href": "#/2",
        "text": "Navigation item 2"
      },
      {
        "href": "#/3",
        "text": "Navigation item 3"
      },
      {
        "href": "#/4",
        "text": "Navigation item 4"
      }
    ]
  }) }}