Components

Service navigation

Service navigation helps users understand that they’re using your service and lets them navigate around your service.

HTML
React

<div
  class="govuk-service-navigation"
  data-module="govuk-service_navigation"
>
  <div class="govuk-width-container">
    <div class="govuk-service-navigation__container">
      <nav
        class="govuk-service-navigation__wrapper"
        aria-label="Menu"
      >
        <button
          type="button"
          class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle"
          aria-controls="navigation"
          hidden=""
        >
          Menu
        </button>
        <ul
          id="navigation"
          class="govuk-service-navigation__list"
        >
          <li
            class="govuk-service-navigation__list__item"
          >
            <a
              class="govuk-service-navigation__list__link"
              href="/styles"
              data-discover="true"
            >
              Navigation item 1
            </a>
          </li>
          <li
            class="govuk-service-navigation__list__item govuk-service-navigation__list__item--active"
          >
            <a
              class="govuk-service-navigation__list__link govuk-service-navigation__list__link--active"
              href="#active"
            >
              Navigation item 2
            </a>
          </li>
          <li
            class="govuk-service-navigation__list__item"
          >
            <a
              class="govuk-service-navigation__list__link"
              href="/contributing"
              data-discover="true"
            >
              Navigation item 3
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

<ServiceNavigation
  items={[
    {
      href: "/styles",
      text: "Navigation item 1",
    },
    {
      href: "#active",
      text: "Navigation item 2",
    },
    {
      href: "/contributing",
      text: "Navigation item 3",
    },
  ]}
/>

Props

Name	Type	Default	Description
id	string	-	'id' attribute to place on the base HTML element
classBlock	string	-	Block name override in BEM style classes applied to all elements
classModifiers	Modifiers	-	BEM style modifiers to apply to the base HTML element
className	string	-	Extra classes to apply to the base HTML element
end	ReactNode	-	Elements to be injected at the end of the service header container
items	Anchor[]	[]	List of links to choose from
maxContentsWidth	number	-	Maximum width of the contents in px units (-1 for full width)
menuButtonText	string	Menu	The text of the mobile navigation menu toggle
menuButtonLabel	string	-	The screen reader label for the mobile navigation menu toggle
navigationLabel	string	-	The screen reader label for the mobile navigation menu. Defaults to the same value as menuButtonText if not specified.
navigationId	string	navigation	The ID used to associate the mobile navigation toggle with the navigation menu.
serviceHref	string	-	Service link URL
serviceName	string	-	Service link text
signOutHref	string	-	Sign out link URL
signOutText	string	Sign out	Sign out link text
start	ReactNode	-	Elements to be injected at the start of the service header container

Rebrand

After 25th June 2025, you should use the rebranded version of this component, by ensuring that a parent element, such as <html>, has the govuk-template--rebranded class.

HTML
React

<div class="govuk-template--rebranded">
  <div
    class="govuk-service-navigation"
    data-module="govuk-service_navigation"
  >
    <div class="govuk-width-container">
      <div
        class="govuk-service-navigation__container"
      >
        <nav
          class="govuk-service-navigation__wrapper"
          aria-label="Menu"
        >
          <button
            type="button"
            class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle"
            aria-controls="navigation"
            hidden=""
          >
            Menu
          </button>
          <ul
            id="navigation"
            class="govuk-service-navigation__list"
          >
            <li
              class="govuk-service-navigation__list__item"
            >
              <a
                class="govuk-service-navigation__list__link"
                href="/styles"
                data-discover="true"
              >
                Navigation item 1
              </a>
            </li>
            <li
              class="govuk-service-navigation__list__item govuk-service-navigation__list__item--active"
            >
              <a
                class="govuk-service-navigation__list__link govuk-service-navigation__list__link--active"
                href="#active"
              >
                Navigation item 2
              </a>
            </li>
            <li
              class="govuk-service-navigation__list__item"
            >
              <a
                class="govuk-service-navigation__list__link"
                href="/contributing"
                data-discover="true"
              >
                Navigation item 3
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</div>

<div className="govuk-template--rebranded">
  <ServiceNavigation
    items={[
      {
        href: "/styles",
        text: "Navigation item 1",
      },
      {
        href: "#active",
        text: "Navigation item 2",
      },
      {
        href: "/contributing",
        text: "Navigation item 3",
      },
    ]}
  />
</div>

When to use this component

Use the Service navigation to help users understand that they’re using your service.

To decide when to use navigation links in your service, see the Help users to navigate a service pattern.

How it works

Together, the GOV.UK header component and Service navigation component ensure users get a consistent experience on GOV.UK.

This also assures users that they’re in the right place to use your service and to understand that GOV.UK functions as one website.

For guidance on how to plan your header and navigation, see the [Help users navigate a service pattern].

Change the blue colour bar under the GOV.UK header to full width

To use the GOV.UK header and Service navigation and make them fit together visually, you’ll need to change the bottom blue border of the GOV.UK header to full width.

Apply a class govuk-header--full-width-border to the GOV.UK header.

HTML
React

<header
  class="govuk-header govuk-header--full-width-border"
  data-module="govuk-header"
>
  <div
    class="govuk-width-container govuk-header__container"
  >
    <div class="govuk-header__logo">
      <a
        class="govuk-header__link govuk-header__link--active govuk-header__link--homepage"
        href="https://www.gov.uk/"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 148 30"
          height="30"
          width="148"
          role="img"
          aria-label="GOV.UK"
          focusable="false"
          class="govuk-header__logotype"
        >
          <title>GOV.UK</title>
          <path
            d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"
          ></path>
        </svg>
      </a>
    </div>
  </div>
</header>
<div
  class="govuk-service-navigation"
  data-module="govuk-service_navigation"
>
  <div class="govuk-width-container">
    <div class="govuk-service-navigation__container">
      <nav
        class="govuk-service-navigation__wrapper"
        aria-label="Menu"
      >
        <button
          type="button"
          class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle"
          aria-controls="navigation"
          hidden=""
        >
          Menu
        </button>
        <ul
          id="navigation"
          class="govuk-service-navigation__list"
        >
          <li
            class="govuk-service-navigation__list__item"
          >
            <a
              class="govuk-service-navigation__list__link"
              href="/styles"
              data-discover="true"
            >
              Navigation item 1
            </a>
          </li>
          <li
            class="govuk-service-navigation__list__item govuk-service-navigation__list__item--active"
          >
            <a
              class="govuk-service-navigation__list__link govuk-service-navigation__list__link--active"
              href="#active"
            >
              Navigation item 2
            </a>
          </li>
          <li
            class="govuk-service-navigation__list__item"
          >
            <a
              class="govuk-service-navigation__list__link"
              href="/contributing"
              data-discover="true"
            >
              Navigation item 3
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

<>
  <Header classModifiers="full-width-border" govUK />
  <ServiceNavigation
    items={[
      {
        href: "/styles",
        text: "Navigation item 1",
      },
      {
        href: "#active",
        text: "Navigation item 2",
      },
      {
        href: "/contributing",
        text: "Navigation item 3",
      },
    ]}
  />
</>

Showing your service name only

We recommend that you use the Service navigation component to show your service name, instead of the GOV.UK header, and to start updating existing services.

HTML
React

<section
  class="govuk-service-navigation"
  aria-label="Service information"
  data-module="govuk-service_navigation"
>
  <div class="govuk-width-container">
    <div class="govuk-service-navigation__container">
      <span
        class="govuk-service-navigation__service-name"
      >
        <a
          class="govuk-link govuk-link--active govuk-service-navigation__link"
          href="#"
        >
          Service name
        </a>
      </span>
    </div>
  </div>
</section>

<ServiceNavigation
  serviceHref="#"
  serviceName="Service name"
/>

Showing service name and navigation links

Show navigation links to let users navigate to different parts of your service and find useful links and tools.

HTML
React

<section
  class="govuk-service-navigation"
  aria-label="Service information"
  data-module="govuk-service_navigation"
>
  <div class="govuk-width-container">
    <div class="govuk-service-navigation__container">
      <span
        class="govuk-service-navigation__service-name"
      >
        <a
          class="govuk-link govuk-link--active govuk-service-navigation__link"
          href="#"
        >
          Service name
        </a>
      </span>
      <nav
        class="govuk-service-navigation__wrapper"
        aria-label="Menu"
      >
        <button
          type="button"
          class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle"
          aria-controls="navigation"
          hidden=""
        >
          Menu
        </button>
        <ul
          id="navigation"
          class="govuk-service-navigation__list"
        >
          <li
            class="govuk-service-navigation__list__item"
          >
            <a
              class="govuk-service-navigation__list__link"
              href="/styles"
              data-discover="true"
            >
              Navigation item 1
            </a>
          </li>
          <li
            class="govuk-service-navigation__list__item govuk-service-navigation__list__item--active"
          >
            <a
              class="govuk-service-navigation__list__link govuk-service-navigation__list__link--active"
              href="#active"
            >
              Navigation item 2
            </a>
          </li>
          <li
            class="govuk-service-navigation__list__item"
          >
            <a
              class="govuk-service-navigation__list__link"
              href="/contributing"
              data-discover="true"
            >
              Navigation item 3
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</section>

<ServiceNavigation
  items={[
    {
      href: "/styles",
      text: "Navigation item 1",
    },
    {
      href: "#active",
      text: "Navigation item 2",
    },
    {
      href: "/contributing",
      text: "Navigation item 3",
    },
  ]}
  serviceHref="#"
  serviceName="Service name"
/>

See when and how to show navigation links in the [Help users navigate a service pattern].

Showing service name and sign-out link

Unofficial

A sign-out link can be provided and added to the end of the list of navigation links.

HTML
React

<section
  class="govuk-service-navigation"
  aria-label="Service information"
  data-module="govuk-service_navigation"
>
  <div class="govuk-width-container">
    <div class="govuk-service-navigation__container">
      <span
        class="govuk-service-navigation__service-name"
      >
        <a
          class="govuk-link govuk-link--active govuk-service-navigation__link"
          href="#"
        >
          Service name
        </a>
      </span>
      <nav
        class="govuk-service-navigation__wrapper"
        aria-label="Menu"
      >
        <button
          type="button"
          class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle"
          aria-controls="navigation"
          hidden=""
        >
          Menu
        </button>
        <ul
          id="navigation"
          class="govuk-service-navigation__list"
        >
          <li
            class="govuk-service-navigation__list__item"
          >
            <a
              class="govuk-service-navigation__list__link"
              href="?sign-out#sign-out"
            >
              Sign out
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</section>

<ServiceNavigation
  serviceHref="#"
  serviceName="Service name"
  signOutHref="?sign-out#sign-out"
/>