Service navigation

Service navigation

Open this example in a new tab

Code

Markup

<div class="govuk-service-navigation"
data-module="govuk-service-navigation"
>
      <div class="govuk-width-container">

    <div class="govuk-service-navigation__container">
      

      
        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
            Menu
          </button>

          <ul class="govuk-service-navigation__list" id="navigation" >

            
              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/1">
                                    
Navigation item 1
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/2">
                                    
Navigation item 2
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/3">
                                    
Navigation item 3
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/4">
                                    
Navigation item 4
                  </a>
              </li>

            </ul>
        </nav>
    </div>

    </div>

  </div>

Macro

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

Service navigation with navigation with a current item

Open this example in a new tab

The current item indicates that the user is present on that exact page. It looks the same as an active item, but marks this item as the one the user is currently viewing in ARIA.

Code

Markup

<div class="govuk-service-navigation"
data-module="govuk-service-navigation"
>
      <div class="govuk-width-container">

    <div class="govuk-service-navigation__container">
      

      
        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
            Menu
          </button>

          <ul class="govuk-service-navigation__list" id="navigation" >

            
              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/1">
                                    
Navigation item 1
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
                  <a class="govuk-service-navigation__link" href="#/2" aria-current="page">
                                    
                  <strong class="govuk-service-navigation__active-fallback">Navigation item 2</strong>

                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/3">
                                    
Navigation item 3
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/4">
                                    
Navigation item 4
                  </a>
              </li>

            </ul>
        </nav>
    </div>

    </div>

  </div>

Macro

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

Service navigation with navigation with an active item

Open this example in a new tab

The active item indicates that the user is within that section, but not on the exact page being linked. It looks the same as a current item, but marks this item as an ancestor to the one the user is viewing in ARIA (e.g. a parent section).

Code

Markup

<div class="govuk-service-navigation"
data-module="govuk-service-navigation"
>
      <div class="govuk-width-container">

    <div class="govuk-service-navigation__container">
      

      
        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
            Menu
          </button>

          <ul class="govuk-service-navigation__list" id="navigation" >

            
              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/1">
                                    
Navigation item 1
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
                  <a class="govuk-service-navigation__link" href="#/2" aria-current="true">
                                    
                  <strong class="govuk-service-navigation__active-fallback">Navigation item 2</strong>

                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/3">
                                    
Navigation item 3
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/4">
                                    
Navigation item 4
                  </a>
              </li>

            </ul>
        </nav>
    </div>

    </div>

  </div>

Macro

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

Service navigation with large navigation

Open this example in a new tab

Code

Markup

<div class="govuk-service-navigation"
data-module="govuk-service-navigation"
>
      <div class="govuk-width-container">

    <div class="govuk-service-navigation__container">
      

      
        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
            Menu
          </button>

          <ul class="govuk-service-navigation__list" id="navigation" >

            
              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/benefits">
                                    
Benefits
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/births-deaths-marriages">
                                    
Births, deaths, marriages and care
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/business">
                                    
Business and self-employed
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/childcare-parenting">
                                    
Childcare and parenting
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/citizenship">
                                    
Citizenship and living in the UK
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/justice">
                                    
Crime, justice and the law
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/disabilities">
                                    
Disabled people
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/driving">
                                    
Driving and transport
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/education">
                                    
Education and learning
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/employing-people">
                                    
Employing people
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/environment-countryside">
                                    
Environment and countryside
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/housing-local-services">
                                    
Housing and local services
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/tax">
                                    
Money and tax
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/abroad">
                                    
Passports, travel and living abroad
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/visas-immigration">
                                    
Visas and immigration
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/browse/working">
                                    
Working, jobs and pensions
                  </a>
              </li>

            </ul>
        </nav>
    </div>

    </div>

  </div>

Macro

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

Service navigation with HTML navigation items

Open this example in a new tab

Code

Markup

<div class="govuk-service-navigation"
data-module="govuk-service-navigation"
>
      <div class="govuk-width-container">

    <div class="govuk-service-navigation__container">
      

      
        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
            Menu
          </button>

          <ul class="govuk-service-navigation__list" id="navigation" >

            
              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/1">
                                    
<em>Navigation item 1</em>
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/2">
                                    
<em>Navigation item 2</em>
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/3">
                                    
<em>Navigation item 3</em>
                  </a>
              </li>

            </ul>
        </nav>
    </div>

    </div>

  </div>

Macro

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

Service navigation with non-link navigation items

Open this example in a new tab

Code

Markup

<div class="govuk-service-navigation"
data-module="govuk-service-navigation"
>
      <div class="govuk-width-container">

    <div class="govuk-service-navigation__container">
      

      
        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
            Menu
          </button>

          <ul class="govuk-service-navigation__list" id="navigation" >

            
              
              <li class="govuk-service-navigation__item">
                  <span class="govuk-service-navigation__text">
                                    
Navigation item 1
                  </span>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <span class="govuk-service-navigation__text">
                                    
<em>Navigation item 2</em>
                  </span>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <span class="govuk-service-navigation__text">
                                    
Navigation item 3
                  </span>
              </li>

            </ul>
        </nav>
    </div>

    </div>

  </div>

Macro

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

Service navigation with service name

Open this example in a new tab

Code

Markup

<section aria-label="Service information" class="govuk-service-navigation"
data-module="govuk-service-navigation"
>
      <div class="govuk-width-container">

    <div class="govuk-service-navigation__container">
      
        <span class="govuk-service-navigation__service-name">
            <span class="govuk-service-navigation__text">Service name</span>
        </span>

      
    </div>

    </div>

  </section>

Macro

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

{{ govukServiceNavigation({
  serviceName: "Service name"
}) }}

Service navigation with service link

Open this example in a new tab

Code

Markup

<section aria-label="Service information" class="govuk-service-navigation"
data-module="govuk-service-navigation"
>
      <div class="govuk-width-container">

    <div class="govuk-service-navigation__container">
      
        <span class="govuk-service-navigation__service-name">
            <a href="#/" class="govuk-service-navigation__link">
              Service name
            </a>
        </span>

      
    </div>

    </div>

  </section>

Macro

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

{{ govukServiceNavigation({
  serviceName: "Service name",
  serviceUrl: "#/"
}) }}

Service navigation with long service name

Open this example in a new tab

Code

Markup

<section aria-label="Service information" class="govuk-service-navigation"
data-module="govuk-service-navigation"
>
      <div class="govuk-width-container">

    <div class="govuk-service-navigation__container">
      
        <span class="govuk-service-navigation__service-name">
            <a href="#/" class="govuk-service-navigation__link">
              Apply to receive a rare holofoil Charizard Pokémon card from the King
            </a>
        </span>

      
    </div>

    </div>

  </section>

Macro

{% 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: "#/"
}) }}

Service navigation with service name and navigation

Open this example in a new tab

Code

Markup

<section aria-label="Service information" class="govuk-service-navigation"
data-module="govuk-service-navigation"
>
      <div class="govuk-width-container">

    <div class="govuk-service-navigation__container">
      
        <span class="govuk-service-navigation__service-name">
            <a href="#/" class="govuk-service-navigation__link">
              Apply for a juggling license
            </a>
        </span>

      
        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
            Menu
          </button>

          <ul class="govuk-service-navigation__list" id="navigation" >

            
              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/1">
                                    
Navigation item 1
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
                  <a class="govuk-service-navigation__link" href="#/2" aria-current="true">
                                    
                  <strong class="govuk-service-navigation__active-fallback">Navigation item 2</strong>

                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/3">
                                    
Navigation item 3
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/4">
                                    
Navigation item 4
                  </a>
              </li>

            </ul>
        </nav>
    </div>

    </div>

  </section>

Macro

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