Service navigation

    Standard

Default

Use the default service navigation to help users navigate around your service. You do not need to add the product name as this will be in our header component.

Show code
<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="default-navigation"
          hidden
          aria-hidden="true"
        >
          Menu
        </button>
        <ul class="govuk-service-navigation__list" id="default-navigation">
          <li class="govuk-service-navigation__item">
            <a
              class="govuk-service-navigation__link"
              href="#/1"
              aria-current="false"
            >
              Navigation item 1
            </a>
          </li>
          <li class="govuk-service-navigation__item">
            <a
              class="govuk-service-navigation__link"
              href="#/2"
              aria-current="false"
            >
              Navigation item 2
            </a>
          </li>
          <li class="govuk-service-navigation__item">
            <a
              class="govuk-service-navigation__link"
              href="#/3"
              aria-current="false"
            >
              Navigation item 3
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>
---
import { ServiceNavigation, ServiceNavigationItem } from "@i-dot-ai-npm/component-library-astro";
---

<ServiceNavigation navigationId="default-navigation">
  <ServiceNavigationItem href="#/1">
    Navigation item 1
  </ServiceNavigationItem>
  <ServiceNavigationItem href="#/2">
    Navigation item 2
  </ServiceNavigationItem>
  <ServiceNavigationItem href="#/3">
    Navigation item 3
  </ServiceNavigationItem>
</ServiceNavigation>
import { ServiceNavigation, ServiceNavigationItem } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <ServiceNavigation navigationId="default-navigation">
      <ServiceNavigationItem href="#/1">
        Navigation item 1
      </ServiceNavigationItem>
      <ServiceNavigationItem href="#/2">
        Navigation item 2
      </ServiceNavigationItem>
      <ServiceNavigationItem href="#/3">
        Navigation item 3
      </ServiceNavigationItem>
    </ServiceNavigation>
  );
}
<script>
  import { ServiceNavigation, ServiceNavigationItem } from "@i-dot-ai-npm/component-library-svelte";
</script>

<ServiceNavigation navigationId="default-navigation">
  <ServiceNavigationItem href="#/1">
    Navigation item 1
  </ServiceNavigationItem>
  <ServiceNavigationItem href="#/2">
    Navigation item 2
  </ServiceNavigationItem>
  <ServiceNavigationItem href="#/3">
    Navigation item 3
  </ServiceNavigationItem>
</ServiceNavigation>
import { ServiceNavigation, ServiceNavigationItem } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <ServiceNavigation navigationId="default-navigation">
      <ServiceNavigationItem href="#/1">
        Navigation item 1
      </ServiceNavigationItem>
      <ServiceNavigationItem href="#/2">
        Navigation item 2
      </ServiceNavigationItem>
      <ServiceNavigationItem href="#/3">
        Navigation item 3
      </ServiceNavigationItem>
    </ServiceNavigation>
  );
}

Inverse

Use the inverse service navigation on dark backgrounds.

Show code
<div
  class="govuk-service-navigation govuk-service-navigation--inverse"
  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="inverse-navigation"
          hidden
          aria-hidden="true"
        >
          Menu
        </button>
        <ul class="govuk-service-navigation__list" id="inverse-navigation">
          <li class="govuk-service-navigation__item">
            <a
              class="govuk-service-navigation__link"
              href="#/1"
              aria-current="false"
            >
              Navigation item 1
            </a>
          </li>
          <li class="govuk-service-navigation__item">
            <a
              class="govuk-service-navigation__link"
              href="#/2"
              aria-current="false"
            >
              Navigation item 2
            </a>
          </li>
          <li class="govuk-service-navigation__item">
            <a
              class="govuk-service-navigation__link"
              href="#/3"
              aria-current="false"
            >
              Navigation item 3
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>
---
import { ServiceNavigation, ServiceNavigationItem } from "@i-dot-ai-npm/component-library-astro";
---

<ServiceNavigation inverse navigationId="inverse-navigation">
  <ServiceNavigationItem href="#/1">
    Navigation item 1
  </ServiceNavigationItem>
  <ServiceNavigationItem href="#/2">
    Navigation item 2
  </ServiceNavigationItem>
  <ServiceNavigationItem href="#/3">
    Navigation item 3
  </ServiceNavigationItem>
</ServiceNavigation>
import { ServiceNavigation, ServiceNavigationItem } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <ServiceNavigation inverse navigationId="inverse-navigation">
      <ServiceNavigationItem href="#/1">
        Navigation item 1
      </ServiceNavigationItem>
      <ServiceNavigationItem href="#/2">
        Navigation item 2
      </ServiceNavigationItem>
      <ServiceNavigationItem href="#/3">
        Navigation item 3
      </ServiceNavigationItem>
    </ServiceNavigation>
  );
}
<script>
  import { ServiceNavigation, ServiceNavigationItem } from "@i-dot-ai-npm/component-library-svelte";
</script>

<ServiceNavigation inverse navigationId="inverse-navigation">
  <ServiceNavigationItem href="#/1">
    Navigation item 1
  </ServiceNavigationItem>
  <ServiceNavigationItem href="#/2">
    Navigation item 2
  </ServiceNavigationItem>
  <ServiceNavigationItem href="#/3">
    Navigation item 3
  </ServiceNavigationItem>
</ServiceNavigation>
import { ServiceNavigation, ServiceNavigationItem } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <ServiceNavigation inverse navigationId="inverse-navigation">
      <ServiceNavigationItem href="#/1">
        Navigation item 1
      </ServiceNavigationItem>
      <ServiceNavigationItem href="#/2">
        Navigation item 2
      </ServiceNavigationItem>
      <ServiceNavigationItem href="#/3">
        Navigation item 3
      </ServiceNavigationItem>
    </ServiceNavigation>
  );
}

Side navigation

Use the side navigation variant to display navigation vertically alongside page content.

Show code
<div style="display: flex;">
  <div
    class="govuk-service-navigation govuk-service-navigation--side-nav"
    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="side-nav-navigation"
            hidden
            aria-hidden="true"
          >
            Menu
          </button>
          <ul class="govuk-service-navigation__list" id="side-nav-navigation">
            <li class="govuk-service-navigation__item">
              <a
                class="govuk-service-navigation__link"
                href="#/1"
                aria-current="false"
              >
                Navigation item 1
              </a>
            </li>
            <li class="govuk-service-navigation__item">
              <a
                class="govuk-service-navigation__link"
                href="#/2"
                aria-current="false"
              >
                Navigation item 2
              </a>
            </li>
            <li class="govuk-service-navigation__item">
              <a
                class="govuk-service-navigation__link"
                href="#/3"
                aria-current="false"
              >
                Navigation item 3
              </a>
            </li>
            <li class="govuk-service-navigation__item">
              <a
                class="govuk-service-navigation__link"
                href="#/4"
                aria-current="false"
              >
                Navigation item 4
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
  <div
    style="flex: 1; border: 1px solid var(--govuk-border-colour);"
    class="govuk-!-padding-6"
  >
    Page content
  </div>
</div>
---
import { ServiceNavigation, ServiceNavigationItem } from "@i-dot-ai-npm/component-library-astro";
---

<div style="display: flex;">
  <ServiceNavigation sideNav navigationId="side-nav-navigation">
    <ServiceNavigationItem href="#/1">Navigation item 1</ServiceNavigationItem>
    <ServiceNavigationItem href="#/2">Navigation item 2</ServiceNavigationItem>
    <ServiceNavigationItem href="#/3">Navigation item 3</ServiceNavigationItem>
    <ServiceNavigationItem href="#/4">Navigation item 4</ServiceNavigationItem>
  </ServiceNavigation>
  <div
    style="flex: 1; border: 1px solid var(--govuk-border-colour);"
    class="govuk-!-padding-6"
  >
    Page content
  </div>
</div>
import { ServiceNavigation, ServiceNavigationItem } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <div style="display: flex;">
      <ServiceNavigation sideNav navigationId="side-nav-navigation">
        <ServiceNavigationItem href="#/1">Navigation item 1</ServiceNavigationItem>
        <ServiceNavigationItem href="#/2">Navigation item 2</ServiceNavigationItem>
        <ServiceNavigationItem href="#/3">Navigation item 3</ServiceNavigationItem>
        <ServiceNavigationItem href="#/4">Navigation item 4</ServiceNavigationItem>
      </ServiceNavigation>
      <div
        style="flex: 1; border: 1px solid var(--govuk-border-colour);"
        className="govuk-!-padding-6"
      >
        Page content
      </div>
    </div>
  );
}
<script>
  import { ServiceNavigation, ServiceNavigationItem } from "@i-dot-ai-npm/component-library-svelte";
</script>

<div style="display: flex;">
  <ServiceNavigation sideNav navigationId="side-nav-navigation">
    <ServiceNavigationItem href="#/1">Navigation item 1</ServiceNavigationItem>
    <ServiceNavigationItem href="#/2">Navigation item 2</ServiceNavigationItem>
    <ServiceNavigationItem href="#/3">Navigation item 3</ServiceNavigationItem>
    <ServiceNavigationItem href="#/4">Navigation item 4</ServiceNavigationItem>
  </ServiceNavigation>
  <div
    style="flex: 1; border: 1px solid var(--govuk-border-colour);"
    class="govuk-!-padding-6"
  >
    Page content
  </div>
</div>
import { ServiceNavigation, ServiceNavigationItem } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <div style="display: flex;">
      <ServiceNavigation sideNav navigationId="side-nav-navigation">
        <ServiceNavigationItem href="#/1">Navigation item 1</ServiceNavigationItem>
        <ServiceNavigationItem href="#/2">Navigation item 2</ServiceNavigationItem>
        <ServiceNavigationItem href="#/3">Navigation item 3</ServiceNavigationItem>
        <ServiceNavigationItem href="#/4">Navigation item 4</ServiceNavigationItem>
      </ServiceNavigation>
      <div
        style="flex: 1; border: 1px solid var(--govuk-border-colour);"
        class="govuk-!-padding-6"
      >
        Page content
      </div>
    </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.