Skip to main contentComponents
Service navigation
Service navigation helps users understand that they’re using your service and lets them navigate around your service.
Props
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.
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.
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.
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.
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.
<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=""
aria-hidden="true"
>
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",
},
]}
/>
<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=""
aria-hidden="true"
>
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>
<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=""
aria-hidden="true"
>
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",
},
]}
/>
</>
<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"
/>
<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=""
aria-hidden="true"
>
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"
/>
<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=""
aria-hidden="true"
>
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"
/>