This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content

Service header

Service header

Open this example in a new tab: service header

Code

Markup

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

        <div class="govuk-service-header__container">
          
            <span class="govuk-service-header__service-name">
Service name            </span>

          
        </div>

        </div>
  </section>

Macro

{% from "govuk/components/service-header/macro.njk" import govukServiceHeader %}

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

Open this example in a new tab: service header with service link

Code

Markup

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

        <div class="govuk-service-header__container">
          
            <span class="govuk-service-header__service-name">
              <a href="#/" class="govuk-service-header__link govuk-service-header__link--service-name">
                Service name
              </a>
            </span>

          
        </div>

        </div>
  </section>

Macro

{% from "govuk/components/service-header/macro.njk" import govukServiceHeader %}

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

Service header with long service name

Open this example in a new tab: service header with long service name

Code

Markup

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

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

          
        </div>

        </div>
  </section>

Macro

{% from "govuk/components/service-header/macro.njk" import govukServiceHeader %}

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

Service header with navigation

Open this example in a new tab: service header with navigation

Code

Markup

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

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

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

              <ul class="govuk-service-header__navigation-list" id="navigation" >

                                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/1">
                        
Navigation item 1                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/2">
                        
Navigation item 2                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/3">
                        
Navigation item 3                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/4">
                        
Navigation item 4                      </a>
                  </li>

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

        </div>
  </section>

Macro

{% from "govuk/components/service-header/macro.njk" import govukServiceHeader %}

{{ govukServiceHeader({
  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 header with navigation with a current item

Open this example in a new tab: service header with navigation with a current item

The current item indicates that the user is present on that exact page. It looks the same as an active item, but has different underlying semantics.

Code

Markup

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

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

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

              <ul class="govuk-service-header__navigation-list" id="navigation" >

                                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/1">
                        
Navigation item 1                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item govuk-service-header__navigation-item--active">
                      <a class="govuk-service-header__link" href="#/2" aria-current="page">
                        
                          <strong class="govuk-service-header__active-fallback">Navigation item 2</strong>
                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/3">
                        
Navigation item 3                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/4">
                        
Navigation item 4                      </a>
                  </li>

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

        </div>
  </section>

Macro

{% from "govuk/components/service-header/macro.njk" import govukServiceHeader %}

{{ govukServiceHeader({
  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 header with navigation with an active item

Open this example in a new tab: service header with navigation with an active item

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 has different underlying semantics.

Code

Markup

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

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

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

              <ul class="govuk-service-header__navigation-list" id="navigation" >

                                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/1">
                        
Navigation item 1                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item govuk-service-header__navigation-item--active">
                      <a class="govuk-service-header__link" href="#/2" aria-current="true">
                        
                          <strong class="govuk-service-header__active-fallback">Navigation item 2</strong>
                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/3">
                        
Navigation item 3                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/4">
                        
Navigation item 4                      </a>
                  </li>

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

        </div>
  </section>

Macro

{% from "govuk/components/service-header/macro.njk" import govukServiceHeader %}

{{ govukServiceHeader({
  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 header with large navigation

Open this example in a new tab: service header with large navigation

Code

Markup

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

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

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

              <ul class="govuk-service-header__navigation-list" id="navigation" >

                                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/benefits">
                        
Benefits                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/births-deaths-marriages">
                        
Births, deaths, marriages and care                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/business">
                        
Business and self-employed                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/childcare-parenting">
                        
Childcare and parenting                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/citizenship">
                        
Citizenship and living in the UK                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/justice">
                        
Crime, justice and the law                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/disabilities">
                        
Disabled people                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/driving">
                        
Driving and transport                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/education">
                        
Education and learning                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/employing-people">
                        
Employing people                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/environment-countryside">
                        
Environment and countryside                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/housing-local-services">
                        
Housing and local services                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/tax">
                        
Money and tax                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/abroad">
                        
Passports, travel and living abroad                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/visas-immigration">
                        
Visas and immigration                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/browse/working">
                        
Working, jobs and pensions                      </a>
                  </li>

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

        </div>
  </section>

Macro

{% from "govuk/components/service-header/macro.njk" import govukServiceHeader %}

{{ govukServiceHeader({
  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 header with HTML navigation items

Open this example in a new tab: service header with html navigation items

Code

Markup

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

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

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

              <ul class="govuk-service-header__navigation-list" id="navigation" >

                                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/1">
                        
<em>Navigation item 1</em>                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/2">
                        
<em>Navigation item 2</em>                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/3">
                        
<em>Navigation item 3</em>                      </a>
                  </li>

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

        </div>
  </section>

Macro

{% from "govuk/components/service-header/macro.njk" import govukServiceHeader %}

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

Open this example in a new tab: service header with non-link navigation items

Code

Markup

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

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

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

              <ul class="govuk-service-header__navigation-list" id="navigation" >

                                  <li class="govuk-service-header__navigation-item">
                      <span class="govuk-service-header__navigation-text">Navigation item 1</span>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <span class="govuk-service-header__navigation-text"><em>Navigation item 2</em></span>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <span class="govuk-service-header__navigation-text">Navigation item 3</span>
                  </li>

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

        </div>
  </section>

Macro

{% from "govuk/components/service-header/macro.njk" import govukServiceHeader %}

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

Service header with service name and navigation

Open this example in a new tab: service header with service name and navigation

Code

Markup

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

        <div class="govuk-service-header__container">
          
            <span class="govuk-service-header__service-name">
              <a href="#/" class="govuk-service-header__link govuk-service-header__link--service-name">
                Apply for a juggling license
              </a>
            </span>

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

              <ul class="govuk-service-header__navigation-list" id="navigation" >

                                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/1">
                        
Navigation item 1                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item govuk-service-header__navigation-item--active">
                      <a class="govuk-service-header__link" href="#/2" aria-current="true">
                        
                          <strong class="govuk-service-header__active-fallback">Navigation item 2</strong>
                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/3">
                        
Navigation item 3                      </a>
                  </li>
                  <li class="govuk-service-header__navigation-item">
                      <a class="govuk-service-header__link" href="#/4">
                        
Navigation item 4                      </a>
                  </li>

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

        </div>
  </section>

Macro

{% from "govuk/components/service-header/macro.njk" import govukServiceHeader %}

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