diff --git a/CHANGELOG.md b/CHANGELOG.md
index e64de9b80c..cf347a2430 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,19 @@ For advice on how to use these release notes see [our guidance on staying up to
 
 ## Unreleased
 
+### New features
+
+#### Make it easier to navigate complex services with the Service navigation component
+
+We've added a new [Service navigation component](https://design-system.service.gov.uk/components/service-navigation/) to help users to navigate services with multiple top-level sections. This replaces the navigation functions of the Header component, which will be deprecated in a future release of GOV.UK Frontend.
+
+This component includes some features we consider experimental. We intend to iterate these features in response to user feedback. These are:
+
+- moving the service name from the Header to the Service navigation
+- providing slots for injecting custom HTML into specified locations within the component
+
+We introduced this change in [pull request #5206: Service navigation component](https://github.com/alphagov/govuk-frontend/pull/5206).
+
 ## v5.5.0 (Feature release)
 
 To install this version with npm, run `npm install govuk-frontend@5.5.0`. You can also find more information about [how to stay up to date](https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version) in our documentation.
diff --git a/packages/govuk-frontend/src/govuk-prototype-kit/govuk-prototype-kit.config.unit.test.mjs b/packages/govuk-frontend/src/govuk-prototype-kit/govuk-prototype-kit.config.unit.test.mjs
index 96af4b48d8..c4621343ce 100644
--- a/packages/govuk-frontend/src/govuk-prototype-kit/govuk-prototype-kit.config.unit.test.mjs
+++ b/packages/govuk-frontend/src/govuk-prototype-kit/govuk-prototype-kit.config.unit.test.mjs
@@ -152,6 +152,10 @@ describe('GOV.UK Prototype Kit config', () => {
           importFrom: 'govuk/components/select/macro.njk',
           macroName: 'govukSelect'
         },
+        {
+          importFrom: 'govuk/components/service-navigation/macro.njk',
+          macroName: 'govukServiceNavigation'
+        },
         {
           importFrom: 'govuk/components/skip-link/macro.njk',
           macroName: 'govukSkipLink'
diff --git a/packages/govuk-frontend/src/govuk/all.mjs b/packages/govuk-frontend/src/govuk/all.mjs
index c4eec04427..78fe080e39 100644
--- a/packages/govuk-frontend/src/govuk/all.mjs
+++ b/packages/govuk-frontend/src/govuk/all.mjs
@@ -9,6 +9,7 @@ export { Header } from './components/header/header.mjs'
 export { NotificationBanner } from './components/notification-banner/notification-banner.mjs'
 export { PasswordInput } from './components/password-input/password-input.mjs'
 export { Radios } from './components/radios/radios.mjs'
+export { ServiceNavigation } from './components/service-navigation/service-navigation.mjs'
 export { SkipLink } from './components/skip-link/skip-link.mjs'
 export { Tabs } from './components/tabs/tabs.mjs'
 export { initAll, createAll } from './init.mjs'
diff --git a/packages/govuk-frontend/src/govuk/all.puppeteer.test.js b/packages/govuk-frontend/src/govuk/all.puppeteer.test.js
index 7b1bd680b4..9343b57932 100644
--- a/packages/govuk-frontend/src/govuk/all.puppeteer.test.js
+++ b/packages/govuk-frontend/src/govuk/all.puppeteer.test.js
@@ -60,6 +60,7 @@ describe('GOV.UK Frontend', () => {
         'NotificationBanner',
         'PasswordInput',
         'Radios',
+        'ServiceNavigation',
         'SkipLink',
         'Tabs'
       ])
diff --git a/packages/govuk-frontend/src/govuk/components/_index.scss b/packages/govuk-frontend/src/govuk/components/_index.scss
index ae246e4950..c121a37bbc 100644
--- a/packages/govuk-frontend/src/govuk/components/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/_index.scss
@@ -27,6 +27,7 @@
 @import "phase-banner/index";
 @import "radios/index";
 @import "select/index";
+@import "service-navigation/index";
 @import "skip-link/index";
 @import "summary-list/index";
 @import "table/index";
diff --git a/packages/govuk-frontend/src/govuk/components/header/_index.scss b/packages/govuk-frontend/src/govuk/components/header/_index.scss
index f9571058df..92e563e3f3 100644
--- a/packages/govuk-frontend/src/govuk/components/header/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/header/_index.scss
@@ -38,6 +38,14 @@
     border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
   }
 
+  .govuk-header--full-width-border {
+    border-bottom-color: $govuk-header-border-color;
+
+    .govuk-header__container {
+      border-bottom-color: transparent;
+    }
+  }
+
   .govuk-header__logotype {
     display: inline-block;
     position: relative;
diff --git a/packages/govuk-frontend/src/govuk/components/header/header.yaml b/packages/govuk-frontend/src/govuk/components/header/header.yaml
index 8d5d899fca..39d3c6e50e 100644
--- a/packages/govuk-frontend/src/govuk/components/header/header.yaml
+++ b/packages/govuk-frontend/src/govuk/components/header/header.yaml
@@ -247,6 +247,12 @@ examples:
         - href: '#3'
           text: Navigation item 3
 
+  - name: with full width border
+    description: Makes the header's bottom border full width without affecting the header's content.
+    options:
+      classes: govuk-header--full-width-border
+      productName: Product Name
+
   - name: navigation item with html
     options:
       serviceName: Service Name
diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/README.md b/packages/govuk-frontend/src/govuk/components/service-navigation/README.md
new file mode 100644
index 0000000000..87e7f1f08f
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/components/service-navigation/README.md
@@ -0,0 +1,15 @@
+# Service navigation
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the Service navigation component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/service-navigation).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/service-navigation/#options-service-navigation-example) for details.
diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/_index.scss b/packages/govuk-frontend/src/govuk/components/service-navigation/_index.scss
new file mode 100644
index 0000000000..0841fa3298
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/components/service-navigation/_index.scss
@@ -0,0 +1,160 @@
+@include govuk-exports("govuk/component/service-navigation") {
+  $govuk-service-navigation-active-link-border-width: govuk-spacing(1);
+  $govuk-service-navigation-background: $govuk-canvas-background-colour;
+  $govuk-service-navigation-border-colour: $govuk-border-colour;
+
+  // We make the link colour a little darker than normal here so that it has
+  // better perceptual contrast with the navigation background.
+  $govuk-service-navigation-link-colour: govuk-shade($govuk-link-colour, 10%);
+
+  .govuk-service-navigation {
+    border-bottom: 1px solid $govuk-service-navigation-border-colour;
+    background-color: $govuk-service-navigation-background;
+  }
+
+  .govuk-service-navigation__container {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+
+    @include govuk-media-query($from: tablet) {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  }
+
+  // These styles are shared between nav items and the service name, they
+  // ensure that both of them remain vertically aligned with one another
+  .govuk-service-navigation__item,
+  .govuk-service-navigation__service-name {
+    position: relative;
+    margin: govuk-spacing(2) 0;
+    border: 0 solid $govuk-service-navigation-link-colour;
+
+    @include govuk-media-query($from: tablet) {
+      margin-top: 0;
+      margin-bottom: 0;
+      padding: govuk-spacing(4) 0;
+
+      &:not(:last-child) {
+        @include govuk-responsive-margin(6, $direction: right);
+      }
+    }
+  }
+
+  .govuk-service-navigation__item--active {
+    @include govuk-media-query($until: tablet) {
+      // Negative offset the left margin so we can place a current page indicator
+      // to the left without misaligning the list item text.
+      margin-left: ((govuk-spacing(2) + $govuk-service-navigation-active-link-border-width) * -1);
+      padding-left: govuk-spacing(2);
+      border-left-width: $govuk-service-navigation-active-link-border-width;
+    }
+
+    @include govuk-media-query($from: tablet) {
+      padding-bottom: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width;
+      border-bottom-width: $govuk-service-navigation-active-link-border-width;
+    }
+  }
+
+  .govuk-service-navigation__link {
+    @include govuk-link-common;
+    @include govuk-link-style-no-underline;
+    @include govuk-link-style-no-visited-state;
+
+    &:not(:hover):not(:focus) {
+      // We set the colour here as we don't want to override the hover or
+      // focus colours
+      color: $govuk-service-navigation-link-colour;
+    }
+  }
+
+  //
+  // Service name specific code
+  //
+
+  .govuk-service-navigation__service-name {
+    @include govuk-font($size: 19, $weight: bold);
+  }
+
+  // Annoyingly this requires a compound selector in order to overcome the
+  // specificity of the other link colour override we're doing
+  .govuk-service-navigation__service-name .govuk-service-navigation__link {
+    @include govuk-link-style-text;
+  }
+
+  //
+  // Navigation list specific code
+  //
+
+  .govuk-service-navigation__toggle {
+    @include govuk-font($size: 19, $weight: bold);
+    display: inline-flex;
+    margin: 0 0 govuk-spacing(2);
+    padding: 0;
+    border: 0;
+    color: $govuk-service-navigation-link-colour;
+    background: none;
+    word-break: break-all;
+    cursor: pointer;
+    align-items: center;
+
+    &:focus {
+      @include govuk-focused-text;
+    }
+
+    &::after {
+      @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
+      content: "";
+      margin-left: govuk-spacing(1);
+    }
+
+    &[aria-expanded="true"]::after {
+      @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
+    }
+
+    // Ensure the button stays hidden if the hidden attribute is present
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .govuk-service-navigation__list {
+    @include govuk-font($size: 19);
+    margin: 0;
+    margin-bottom: govuk-spacing(3);
+    padding: 0;
+    list-style: none;
+
+    // Make the navigation list a flexbox. Doing so resolves a couple of
+    // accessibility problems caused by the list items being inline-blocks:
+    // - Removes the extra whitespace from between each list item that screen
+    //   readers would pointlessly announce.
+    // - Fixes an NVDA issue in Firefox and Chrome <= 124 where it would read
+    //   all of the links as a run-on sentence.
+    @include govuk-media-query($from: tablet) {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 0;
+
+      // However... IE11 totally trips over flexbox and doesn't wrap anything,
+      // making all of the items into a single, horizontally scrolling row,
+      // which is no good. This CSS hack removes the flexbox definition for
+      // IE 10 & 11, reverting it to the flawed, but OK, non-flexbox version.
+      //
+      // CSS hack taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
+      // which also includes an explanation of why this works
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+        display: block;
+      }
+    }
+  }
+
+  // This is a <strong> element that is used as a fallback mechanism for
+  // visually indicating the current page in scenarios where CSS isn't
+  // available. We don't actually want it to be bold normally, so set it to
+  // inherit the parent font-weight.
+  .govuk-service-navigation__active-fallback {
+    font-weight: inherit;
+  }
+}
diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/_service-navigation.scss b/packages/govuk-frontend/src/govuk/components/service-navigation/_service-navigation.scss
new file mode 100644
index 0000000000..bfabb03440
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/components/service-navigation/_service-navigation.scss
@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";
diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/accessibility.puppeteer.test.mjs b/packages/govuk-frontend/src/govuk/components/service-navigation/accessibility.puppeteer.test.mjs
new file mode 100644
index 0000000000..0bcb7e9381
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/components/service-navigation/accessibility.puppeteer.test.mjs
@@ -0,0 +1,30 @@
+import { axe, render } from '@govuk-frontend/helpers/puppeteer'
+import { getExamples } from '@govuk-frontend/lib/components'
+
+describe('/components/service-navigation', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
+
+  describe('component examples', () => {
+    it('passes accessibility tests', async () => {
+      const examples = await getExamples('service-navigation')
+
+      // Remove the 'with no options set' example from being tested, as the
+      // component doesn't output anything in that scenario.
+      delete examples['with no options set']
+
+      for (const exampleName in examples) {
+        await render(page, 'service-navigation', examples[exampleName])
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
+      }
+    }, 120000)
+  })
+})
diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/macro.njk b/packages/govuk-frontend/src/govuk/components/service-navigation/macro.njk
new file mode 100644
index 0000000000..67305e832a
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/components/service-navigation/macro.njk
@@ -0,0 +1,3 @@
+{% macro govukServiceNavigation(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}
diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.mjs b/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.mjs
new file mode 100644
index 0000000000..8c9bb9a2a5
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.mjs
@@ -0,0 +1,171 @@
+import { getBreakpoint } from '../../common/index.mjs'
+import { ElementError } from '../../errors/index.mjs'
+import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
+
+/**
+ * Service Navigation component
+ *
+ * @preserve
+ */
+export class ServiceNavigation extends GOVUKFrontendComponent {
+  /** @private */
+  $module
+
+  /** @private */
+  $menuButton
+
+  /** @private */
+  $menu
+
+  /**
+   * Remember the open/closed state of the nav so we can maintain it when the
+   * screen is resized.
+   *
+   * @private
+   */
+  menuIsOpen = false
+
+  /**
+   * A global const for storing a matchMedia instance which we'll use to detect
+   * when a screen size change happens. We rely on it being null if the feature
+   * isn't available to initially apply hidden attributes
+   *
+   * @private
+   * @type {MediaQueryList | null}
+   */
+  mql = null
+
+  /**
+   * @param {Element | null} $module - HTML element to use for header
+   */
+  constructor($module) {
+    super()
+
+    if (!$module) {
+      throw new ElementError({
+        componentName: 'Service Navigation',
+        element: $module,
+        identifier: 'Root element (`$module`)'
+      })
+    }
+
+    this.$module = $module
+
+    const $menuButton = $module.querySelector(
+      '.govuk-js-service-navigation-toggle'
+    )
+
+    // Headers don't necessarily have a navigation. When they don't, the menu
+    // toggle won't be rendered by our macro (or may be omitted when writing
+    // plain HTML)
+    if (!$menuButton) {
+      return this
+    }
+
+    const menuId = $menuButton.getAttribute('aria-controls')
+    if (!menuId) {
+      throw new ElementError({
+        componentName: 'Service Navigation',
+        identifier:
+          'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`)'
+      })
+    }
+
+    const $menu = document.getElementById(menuId)
+    if (!$menu) {
+      throw new ElementError({
+        componentName: 'Service Navigation',
+        element: $menu,
+        identifier: `Navigation (\`<ul id="${menuId}">\`)`
+      })
+    }
+
+    this.$menu = $menu
+    this.$menuButton = $menuButton
+
+    this.setupResponsiveChecks()
+
+    this.$menuButton.addEventListener('click', () =>
+      this.handleMenuButtonClick()
+    )
+  }
+
+  /**
+   * Setup viewport resize check
+   *
+   * @private
+   */
+  setupResponsiveChecks() {
+    const breakpoint = getBreakpoint('tablet')
+
+    if (!breakpoint.value) {
+      throw new ElementError({
+        componentName: 'Service Navigation',
+        identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
+      })
+    }
+
+    // Media query list for GOV.UK Frontend desktop breakpoint
+    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`)
+
+    // MediaQueryList.addEventListener isn't supported by Safari < 14 so we need
+    // to be able to fall back to the deprecated MediaQueryList.addListener
+    if ('addEventListener' in this.mql) {
+      this.mql.addEventListener('change', () => this.checkMode())
+    } else {
+      // @ts-expect-error Property 'addListener' does not exist
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      this.mql.addListener(() => this.checkMode())
+    }
+
+    this.checkMode()
+  }
+
+  /**
+   * Sync menu state
+   *
+   * Uses the global variable menuIsOpen to correctly set the accessible and
+   * visual states of the menu and the menu button.
+   * Additionally will force the menu to be visible and the menu button to be
+   * hidden if the matchMedia is triggered to desktop.
+   *
+   * @private
+   */
+  checkMode() {
+    if (!this.mql || !this.$menu || !this.$menuButton) {
+      return
+    }
+
+    if (this.mql.matches) {
+      this.$menu.removeAttribute('hidden')
+      this.$menuButton.setAttribute('hidden', '')
+    } else {
+      this.$menuButton.removeAttribute('hidden')
+      this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString())
+
+      if (this.menuIsOpen) {
+        this.$menu.removeAttribute('hidden')
+      } else {
+        this.$menu.setAttribute('hidden', '')
+      }
+    }
+  }
+
+  /**
+   * Handle menu button click
+   *
+   * When the menu button is clicked, change the visibility of the menu and then
+   * sync the accessibility state and menu button state
+   *
+   * @private
+   */
+  handleMenuButtonClick() {
+    this.menuIsOpen = !this.menuIsOpen
+    this.checkMode()
+  }
+
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
+  static moduleName = 'govuk-service-navigation'
+}
diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.puppeteer.test.js
new file mode 100644
index 0000000000..db145c7318
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.puppeteer.test.js
@@ -0,0 +1,219 @@
+const { render } = require('@govuk-frontend/helpers/puppeteer')
+const { getExamples } = require('@govuk-frontend/lib/components')
+const { KnownDevices } = require('puppeteer')
+
+const iPhone = KnownDevices['iPhone 6']
+
+const navigationSelector = `.govuk-service-navigation__list`
+const toggleButtonSelector = '.govuk-js-service-navigation-toggle'
+
+describe('/components/service-navigation', () => {
+  let examples
+
+  beforeAll(async () => {
+    examples = await getExamples('service-navigation')
+
+    // The only JS functionality this component has currently is on mobile
+    // viewports, so let's emulate a phone.
+    await page.emulate(iPhone)
+  })
+
+  describe('when JavaScript is unavailable or fails', () => {
+    beforeAll(async () => {
+      await page.setJavaScriptEnabled(false)
+      await render(page, 'service-navigation', examples.default)
+    })
+
+    afterAll(async () => {
+      await page.setJavaScriptEnabled(true)
+    })
+
+    it('renders navigation expanded by default', async () => {
+      const navigationIsVisible = await page.waitForSelector(
+        navigationSelector,
+        { visible: true, timeout: 10000 }
+      )
+
+      expect(navigationIsVisible).toBeTruthy()
+    })
+
+    it('renders the toggle button hidden', async () => {
+      const buttonHiddenAttribute = await page.$eval(
+        toggleButtonSelector,
+        (el) => el.hasAttribute('hidden')
+      )
+
+      expect(buttonHiddenAttribute).toBeTruthy()
+    })
+  })
+
+  describe('when JavaScript is available', () => {
+    describe('if no navigation is present', () => {
+      it('exits gracefully with no errors', async () => {
+        // Errors logged to the console will cause this test to fail
+        return expect(
+          render(page, 'service-navigation', examples.default)
+        ).resolves.not.toThrow()
+      })
+    })
+
+    describe('errors at instantiation', () => {
+      it('can throw a SupportError if appropriate', async () => {
+        await expect(
+          render(page, 'service-navigation', examples.default, {
+            beforeInitialisation() {
+              document.body.classList.remove('govuk-frontend-supported')
+            }
+          })
+        ).rejects.toMatchObject({
+          cause: {
+            name: 'SupportError',
+            message:
+              'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet'
+          }
+        })
+      })
+
+      it('throws when $module is not set', async () => {
+        await expect(
+          render(page, 'service-navigation', examples.default, {
+            beforeInitialisation($module) {
+              // Remove the root of the components as a way
+              // for the constructor to receive the wrong type for `$module`
+              $module.remove()
+            }
+          })
+        ).rejects.toMatchObject({
+          cause: {
+            name: 'ElementError',
+            message: 'Service Navigation: Root element (`$module`) not found'
+          }
+        })
+      })
+
+      it("throws when the toggle's aria-control attribute is missing", async () => {
+        await expect(
+          render(page, 'service-navigation', examples.default, {
+            beforeInitialisation($module, { selector }) {
+              $module.querySelector(selector).removeAttribute('aria-controls')
+            },
+            context: {
+              selector: toggleButtonSelector
+            }
+          })
+        ).rejects.toMatchObject({
+          cause: {
+            name: 'ElementError',
+            message:
+              'Service Navigation: Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`) not found'
+          }
+        })
+      })
+
+      it('throws when the menu is missing, but a toggle is present', async () => {
+        await expect(
+          render(page, 'service-navigation', examples.default, {
+            beforeInitialisation($module, { selector }) {
+              // Remove the `<ul>` referenced by $menuButton's `aria-controls`
+              $module.querySelector(selector).remove()
+            },
+            context: {
+              selector: navigationSelector
+            }
+          })
+        ).rejects.toMatchObject({
+          cause: {
+            name: 'ElementError',
+            message:
+              'Service Navigation: Navigation (`<ul id="navigation">`) not found'
+          }
+        })
+      })
+    })
+
+    describe('on page load', () => {
+      beforeAll(async () => {
+        await render(page, 'service-navigation', examples.default)
+      })
+
+      it('renders navigation hidden by default', async () => {
+        const navigationIsHidden = await page.$eval(navigationSelector, (el) =>
+          el.hasAttribute('hidden')
+        )
+
+        expect(navigationIsHidden).toBeTruthy()
+      })
+
+      it('renders the toggle button visibly', async () => {
+        const buttonHiddenAttribute = await page.$eval(
+          toggleButtonSelector,
+          (el) => el.hasAttribute('hidden')
+        )
+
+        expect(buttonHiddenAttribute).toBeFalsy()
+      })
+
+      it('renders the toggle button with `aria-expanded` set to false', async () => {
+        const toggleExpandedAttribute = await page.$eval(
+          toggleButtonSelector,
+          (el) => el.getAttribute('aria-expanded')
+        )
+
+        expect(toggleExpandedAttribute).toBe('false')
+      })
+    })
+
+    describe('when toggle button is clicked once', () => {
+      beforeAll(async () => {
+        await render(page, 'service-navigation', examples.default)
+        await page.waitForSelector(toggleButtonSelector)
+        await page.click(toggleButtonSelector)
+      })
+
+      it('shows the navigation', async () => {
+        const navigationHiddenAttribute = await page.$eval(
+          navigationSelector,
+          (el) => el.hasAttribute('hidden')
+        )
+
+        expect(navigationHiddenAttribute).toBeFalsy()
+      })
+
+      it('sets `aria-expanded` to true', async () => {
+        const toggleExpandedAttribute = await page.$eval(
+          toggleButtonSelector,
+          (el) => el.getAttribute('aria-expanded')
+        )
+
+        expect(toggleExpandedAttribute).toBe('true')
+      })
+    })
+
+    describe('when toggle button is clicked twice', () => {
+      beforeAll(async () => {
+        await render(page, 'service-navigation', examples.default)
+        await page.waitForSelector(toggleButtonSelector)
+        await page.click(toggleButtonSelector)
+        await page.click(toggleButtonSelector)
+      })
+
+      it('hides the navigation', async () => {
+        const navigationHiddenAttribute = await page.$eval(
+          navigationSelector,
+          (el) => el.hasAttribute('hidden')
+        )
+
+        expect(navigationHiddenAttribute).toBeTruthy()
+      })
+
+      it('sets `aria-expanded` to false', async () => {
+        const toggleExpandedAttribute = await page.$eval(
+          toggleButtonSelector,
+          (el) => el.getAttribute('aria-expanded')
+        )
+
+        expect(toggleExpandedAttribute).toBe('false')
+      })
+    })
+  })
+})
diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.yaml b/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.yaml
new file mode 100644
index 0000000000..6f0f861723
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.yaml
@@ -0,0 +1,289 @@
+params:
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the service navigation container.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example, data attributes) to add to the service navigation container.
+  - name: ariaLabel
+    type: string
+    required: false
+    description: The text for the `aria-label` which labels the service navigation container when a service name is included. Defaults to `"Service information"`.
+  - name: menuButtonText
+    type: string
+    required: false
+    description: The text of the mobile navigation menu toggle.
+  - name: menuButtonLabel
+    type: string
+    required: false
+    description: The screen reader label for the mobile navigation menu toggle. Defaults to the same value as `menuButtonText` if not specified.
+  - name: navigationLabel
+    type: string
+    required: false
+    description: The screen reader label for the mobile navigation menu. Defaults to the same value as `menuButtonText` if not specified.
+  - name: navigationId
+    type: string
+    required: false
+    description: The ID used to associate the mobile navigation toggle with the navigation menu. Defaults to `navigation`.
+  - name: navigationClasses
+    type: string
+    required: false
+    description: Classes to add to the navigation menu container.
+  - name: serviceName
+    type: string
+    required: false
+    description: The name of your service.
+  - name: serviceUrl
+    type: string
+    required: false
+    description: The homepage of your service.
+  - name: navigation
+    type: array
+    required: true
+    description: Used to add navigation to the service header.
+    params:
+      - name: current
+        type: boolean
+        required: false
+        description: If `true`, indicates that the user is currently on this page. This takes precedence over `active`.
+      - name: active
+        type: boolean
+        required: false
+        description: If `true`, indicates that the user is within this group of pages in the navigation hierarchy.
+      - name: html
+        type: string
+        required: true
+        description: HTML for the navigation item. If `html` is provided, the `text` option will be ignored.
+      - name: text
+        type: string
+        required: true
+        description: Text for the navigation item. If `html` is provided, the `text` option will be ignored.
+      - name: href
+        type: string
+        required: false
+        description: URL of the navigation item anchor.
+      - name: attributes
+        type: object
+        required: false
+        description: HTML attributes (for example data attributes) to add to the navigation item anchor.
+  - name: slots
+    type: object
+    required: false
+    description: Specified points for injecting custom HTML into the service header.
+    params:
+      - name: start
+        type: string
+        required: false
+        description: HTML injected at the start of the service header container.
+      - name: end
+        type: string
+        required: false
+        description: HTML injected at the end of the service header container.
+      - name: navigationStart
+        type: string
+        required: false
+        description: HTML injected before the first list item in the navigation list. Requires `navigation` to be set.
+      - name: navigationEnd
+        type: string
+        required: false
+        description: HTML injected after the last list item in the navigation list. Requires `navigation` to be set.
+
+previewLayout: full-width
+
+examples:
+  - name: default
+    options:
+      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
+  - name: with navigation with a current item
+    description: 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.
+    options:
+      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
+  - name: with navigation with an active item
+    description: 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).
+    options:
+      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
+  - name: with large navigation
+    options:
+      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
+  - name: with HTML navigation items
+    options:
+      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>
+  - name: with non-link navigation items
+    options:
+      navigation:
+        - text: Navigation item 1
+        - html: <em>Navigation item 2</em>
+        - text: Navigation item 3
+  - name: with service name
+    options:
+      serviceName: Service name
+  - name: with service link
+    options:
+      serviceName: Service name
+      serviceUrl: '#/'
+  - name: with long service name
+    options:
+      serviceName: Apply to receive a rare holofoil Charizard Pokémon card from the King
+      serviceUrl: '#/'
+  - name: with service name and navigation
+    options:
+      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
+
+  # Hidden examples
+  - name: with no options set
+    description: If no serviceName or navigation is set, don't render anything.
+    hidden: true
+    options: {}
+  - name: attributes
+    hidden: true
+    options:
+      serviceName: Service name
+      attributes:
+        'data-foo': bar
+        'data-pika': chu
+  - name: classes
+    hidden: true
+    options:
+      serviceName: Service name
+      classes: app-my-curious-custom-class
+  - name: with custom aria-label
+    hidden: true
+    options:
+      serviceName: Service name
+      ariaLabel: Service name and nav
+  - name: with custom navigation toggle text
+    hidden: true
+    options:
+      menuButtonText: Enter the NavZone
+      navigation:
+        - href: '#/1'
+          text: Navigation item 1
+  - name: with custom navigation toggle label
+    hidden: true
+    options:
+      menuButtonLabel: Enter the NavZone
+      navigation:
+        - href: '#/1'
+          text: Navigation item 1
+  - name: with identical navigation toggle text and label
+    hidden: true
+    options:
+      menuButtonText: Enter the NavZone
+      menuButtonLabel: Enter the NavZone
+      navigation:
+        - href: '#/1'
+          text: Navigation item 1
+  - name: with custom navigation label
+    hidden: true
+    options:
+      navigationLabel: Main navigation
+      navigation:
+        - href: '#/1'
+          text: Navigation item 1
+  - name: with custom navigation toggle text and navigation label
+    hidden: true
+    options:
+      menuButtonText: Enter the NavZone
+      navigationLabel: The NavZone
+      navigation:
+        - href: '#/1'
+          text: Navigation item 1
+  - name: with custom navigation classes
+    hidden: true
+    options:
+      navigationClasses: app-my-neat-navigation-class
+      navigation:
+        - href: '#/1'
+          text: Navigation item 1
+  - name: with custom navigation ID
+    hidden: true
+    options:
+      navigationId: main-nav
+      navigation:
+        - href: '#/1'
+          text: Navigation item 1
+  - name: with slotted content
+    hidden: true
+    options:
+      slots:
+        start: '<div>[start]</div>'
+        end: '<div>[end]</div>'
+        navigationStart: '<li>[navigation start]</li>'
+        navigationEnd: '<li>[navigation end]</li>'
diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/template.njk b/packages/govuk-frontend/src/govuk/components/service-navigation/template.njk
new file mode 100644
index 0000000000..48bcecb95b
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/components/service-navigation/template.njk
@@ -0,0 +1,102 @@
+{% from "../../macros/attributes.njk" import govukAttributes %}
+
+{%- set menuButtonText = params.menuButtonText | default("Menu", true) -%}
+{%- set navigationId = params.navigationId | default("navigation", true) %}
+
+{%- set commonAttributes %}
+class="govuk-service-navigation {%- if params.classes %} {{ params.classes }}{% endif %}"
+data-module="govuk-service-navigation"
+{{- govukAttributes(params.attributes) }}
+{% endset -%}
+
+{%- set innerContent %}
+  <div class="govuk-width-container">
+
+    {# Slot: start #}
+    {%- if params.slots.start %}{{ params.slots.start | safe }}{% endif -%}
+
+    <div class="govuk-service-navigation__container">
+      {# Service name #}
+      {% if params.serviceName %}
+        <span class="govuk-service-navigation__service-name">
+          {% if params.serviceUrl %}
+            <a href="{{ params.serviceUrl }}" class="govuk-service-navigation__link">
+              {{ params.serviceName }}
+            </a>
+          {% else %}
+            <span class="govuk-service-navigation__text">
+              {{- params.serviceName -}}
+            </span>
+          {% endif %}
+        </span>
+      {% endif %}
+
+      {# Navigation #}
+      {% if params.navigation | length or params.slots.navigationStart or params.slots.navigationEnd %}
+        <nav aria-label="{{ params.navigationLabel | default(menuButtonText, true) }}" class="govuk-service-navigation__wrapper {%- if params.navigationClasses %} {{ params.navigationClasses }}{% endif %}">
+          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="{{ navigationId }}" {%- if params.menuButtonLabel and params.menuButtonLabel != menuButtonText %} aria-label="{{ params.menuButtonLabel }}"{% endif %} hidden>
+            {{ menuButtonText }}
+          </button>
+
+          <ul class="govuk-service-navigation__list" id="{{ navigationId }}" >
+
+            {# Slot: navigationStart #}
+            {%- if params.slots.navigationStart %}{{ params.slots.navigationStart | safe }}{% endif -%}
+
+            {% for item in params.navigation %}
+              {% set linkInnerContent %}
+                {# We wrap active links in strong tags so that users who
+                  override colours or styles will still have some indicator of
+                  the current nav item. #}
+                {% if item.active or item.current %}
+                  <strong class="govuk-service-navigation__active-fallback">{{- item.html | safe if item.html else item.text -}}</strong>
+                {% else %}
+                  {{- item.html | safe if item.html else item.text -}}
+                {% endif %}
+              {% endset %}
+
+              {#
+                If item.current, add active style and set aria-current="page"
+                Elseif item.active, add active style and set aria-current="true"
+              #}
+              <li class="govuk-service-navigation__item {%- if item.active or item.current %} govuk-service-navigation__item--active{% endif %}">
+                {% if item.href %}
+                  <a class="govuk-service-navigation__link" href="{{ item.href }}"
+                    {%- if item.active or item.current %} aria-current="{{ 'page' if item.current else 'true' }}"{% endif %}
+                    {{- govukAttributes(item.attributes) -}}>
+                    {{ linkInnerContent | safe }}
+                  </a>
+                {% elif item.html or item.text %}
+                  <span class="govuk-service-navigation__text"
+                    {%- if item.active or item.current %} aria-current="{{ 'page' if item.current else 'true' }}"{% endif %}>
+                    {{ linkInnerContent | safe }}
+                  </span>
+                {% endif %}
+              </li>
+            {% endfor %}
+
+            {# Slot: navigationEnd #}
+            {%- if params.slots.navigationEnd %}{{ params.slots.navigationEnd | safe }}{% endif -%}
+          </ul>
+        </nav>
+      {% endif %}
+    </div>
+
+    {# Slot: end #}
+    {%- if params.slots.end %}{{ params.slots.end | safe }}{% endif -%}
+
+  </div>
+{% endset -%}
+
+{# If a service name is included, we use a <section> element with an
+  aria-label to create a containing landmark region. Otherwise, the <nav> in
+  the innerContent can do the job just fine by itself. #}
+{% if params.serviceName or params.slots.start or params.slots.end %}
+  <section aria-label="{{ params.ariaLabel | default("Service information") }}" {{ commonAttributes | safe }}>
+    {{ innerContent | safe }}
+  </section>
+{% else %}
+  <div {{ commonAttributes | safe }}>
+    {{ innerContent | safe }}
+  </div>
+{% endif %}
diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/template.test.js b/packages/govuk-frontend/src/govuk/components/service-navigation/template.test.js
new file mode 100644
index 0000000000..f610abfd4e
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/components/service-navigation/template.test.js
@@ -0,0 +1,451 @@
+const { render } = require('@govuk-frontend/helpers/nunjucks')
+const { getExamples } = require('@govuk-frontend/lib/components')
+
+describe('Service Navigation', () => {
+  let examples
+
+  beforeAll(async () => {
+    examples = await getExamples('service-navigation')
+  })
+
+  it('renders the container as a <div> if a service name is missing', () => {
+    const $ = render('service-navigation', examples.default)
+    const tagName = $('.govuk-service-navigation').get(0).tagName
+
+    expect(tagName.toLowerCase()).toBe('div')
+  })
+
+  describe('custom options', () => {
+    it('renders attributes correctly', () => {
+      const $ = render('service-navigation', examples.attributes)
+      const $component = $('.govuk-service-navigation')
+
+      expect($component.attr('data-foo')).toBe('bar')
+      expect($component.attr('data-pika')).toBe('chu')
+    })
+
+    it('renders classes correctly', () => {
+      const $ = render('service-navigation', examples.classes)
+      const $component = $('.govuk-service-navigation')
+
+      expect($component.hasClass('app-my-curious-custom-class')).toBeTruthy()
+    })
+  })
+
+  describe('with navigation', () => {
+    it('renders navigation', () => {
+      const $ = render('service-navigation', examples.default)
+      const $component = $('.govuk-service-navigation')
+
+      const $nav = $component.find('nav.govuk-service-navigation__wrapper')
+      const $list = $nav.find('ul.govuk-service-navigation__list')
+      const $items = $list.find('li.govuk-service-navigation__item')
+      const $firstItem = $items.find(
+        'a.govuk-service-navigation__link:first-child'
+      )
+
+      expect($nav).toBeDefined()
+      expect($list).toBeDefined()
+      expect($items).toHaveLength(4)
+      expect($firstItem.attr('href')).toBe('#/1')
+      expect($firstItem.text()).toContain('Navigation item 1')
+    })
+
+    it('renders navigation items containing HTML', () => {
+      const $ = render(
+        'service-navigation',
+        examples['with HTML navigation items']
+      )
+
+      const $list = $('ul.govuk-service-navigation__list')
+      const $items = $list.find('li.govuk-service-navigation__item')
+      const $firstItem = $items.find(
+        'a.govuk-service-navigation__link:first-child'
+      )
+
+      expect($firstItem.html().trim()).toBe('<em>Navigation item 1</em>')
+    })
+
+    it('renders default navigation label', () => {
+      const $ = render('service-navigation', examples.default)
+      const $component = $('.govuk-service-navigation')
+
+      const $nav = $component.find('nav.govuk-service-navigation__wrapper')
+
+      expect($nav.attr('aria-label')).toBe('Menu')
+    })
+
+    it('renders the default navigation ID', () => {
+      const $ = render('service-navigation', examples.default)
+      const $component = $('.govuk-service-navigation')
+
+      const $nav = $component.find('.govuk-service-navigation__list')
+      const $navToggle = $component.find('.govuk-service-navigation__toggle')
+
+      const navId = $nav.attr('id')
+
+      expect(navId).toBe('navigation')
+      expect($navToggle.attr('aria-controls')).toBe(navId)
+    })
+
+    describe('custom options', () => {
+      it('renders custom navigation classes', () => {
+        const $ = render(
+          'service-navigation',
+          examples['with custom navigation classes']
+        )
+        const $component = $('.govuk-service-navigation')
+
+        const $nav = $component.find('nav.govuk-service-navigation__wrapper')
+
+        expect($nav.hasClass('app-my-neat-navigation-class')).toBeTruthy()
+      })
+
+      it('renders custom navigation label', () => {
+        const $ = render(
+          'service-navigation',
+          examples['with custom navigation label']
+        )
+        const $component = $('.govuk-service-navigation')
+
+        const $nav = $component.find('nav.govuk-service-navigation__wrapper')
+
+        expect($nav.attr('aria-label')).toBe('Main navigation')
+      })
+
+      it('renders custom navigation ID', () => {
+        const $ = render(
+          'service-navigation',
+          examples['with custom navigation ID']
+        )
+        const $component = $('.govuk-service-navigation')
+
+        const $nav = $component.find('.govuk-service-navigation__list')
+        const $navToggle = $component.find('.govuk-service-navigation__toggle')
+
+        const navId = $nav.attr('id')
+
+        expect(navId).toBe('main-nav')
+        expect($navToggle.attr('aria-controls')).toBe(navId)
+      })
+    })
+
+    describe('toggle button', () => {
+      it('renders the navigation toggle button', () => {
+        const $ = render('service-navigation', examples.default)
+        const $component = $('.govuk-service-navigation')
+
+        const $navToggle = $component.find('.govuk-service-navigation__toggle')
+
+        expect($navToggle).toHaveLength(1)
+        expect($navToggle.get(0).tagName).toBe('button')
+        expect($navToggle.attr('type')).toBe('button')
+      })
+
+      it('renders the navigation toggle button hidden by default', () => {
+        const $ = render('service-navigation', examples.default)
+        const $component = $('.govuk-service-navigation')
+
+        const $navToggle = $component.find('.govuk-service-navigation__toggle')
+
+        expect($navToggle.attr('hidden')).toBeDefined()
+      })
+
+      describe('toggle label', () => {
+        it("doesn't render the label by default", () => {
+          const $ = render('service-navigation', examples.default)
+          const $component = $('.govuk-service-navigation')
+
+          const $navToggle = $component.find(
+            '.govuk-service-navigation__toggle'
+          )
+
+          expect($navToggle.attr('aria-label')).toBeUndefined()
+        })
+
+        it('does not render the label if the specified label is the same as the text', () => {
+          const $ = render(
+            'service-navigation',
+            examples['with identical navigation toggle text and label']
+          )
+          const $component = $('.govuk-service-navigation')
+
+          const $navToggle = $component.find(
+            '.govuk-service-navigation__toggle'
+          )
+
+          expect($navToggle.text().trim()).toBe('Enter the NavZone')
+          expect($navToggle.attr('aria-label')).toBeUndefined()
+        })
+
+        it('renders custom label', () => {
+          const $ = render(
+            'service-navigation',
+            examples['with custom navigation toggle label']
+          )
+          const $component = $('.govuk-service-navigation')
+
+          const $navToggle = $component.find(
+            '.govuk-service-navigation__toggle'
+          )
+
+          expect($navToggle.attr('aria-label')).toBe('Enter the NavZone')
+        })
+      })
+
+      describe('toggle text', () => {
+        it('renders default text', () => {
+          const $ = render('service-navigation', examples.default)
+          const $component = $('.govuk-service-navigation')
+
+          const $navToggle = $component.find(
+            '.govuk-service-navigation__toggle'
+          )
+
+          expect($navToggle.text().trim()).toBe('Menu')
+        })
+
+        it('renders custom text', () => {
+          const $ = render(
+            'service-navigation',
+            examples['with custom navigation toggle text']
+          )
+          const $component = $('.govuk-service-navigation')
+
+          const $navToggle = $component.find(
+            '.govuk-service-navigation__toggle'
+          )
+
+          expect($navToggle.text().trim()).toBe('Enter the NavZone')
+        })
+
+        it('bubbles custom text to the navigation label', () => {
+          const $ = render(
+            'service-navigation',
+            examples['with custom navigation toggle text']
+          )
+          const $component = $('.govuk-service-navigation')
+
+          const $nav = $component.find('nav.govuk-service-navigation__wrapper')
+          const $navToggle = $component.find(
+            '.govuk-service-navigation__toggle'
+          )
+
+          const navLabel = $nav.attr('aria-label')
+          const navToggleText = $navToggle.text().trim()
+
+          expect(navToggleText).toBe('Enter the NavZone')
+          expect(navLabel).toBe(navToggleText)
+        })
+
+        it("does not bubble custom text to the navigation label if it's been customised", () => {
+          const $ = render(
+            'service-navigation',
+            examples['with custom navigation toggle text and navigation label']
+          )
+          const $component = $('.govuk-service-navigation')
+
+          const $nav = $component.find('nav.govuk-service-navigation__wrapper')
+          const $navToggle = $component.find(
+            '.govuk-service-navigation__toggle'
+          )
+
+          const navLabel = $nav.attr('aria-label')
+          const navToggleText = $navToggle.text().trim()
+
+          expect(navLabel).toBe('The NavZone')
+          expect(navToggleText).toBe('Enter the NavZone')
+        })
+      })
+    })
+
+    describe('non-linked navigation items', () => {
+      it('renders text passed without a link', () => {
+        const $ = render(
+          'service-navigation',
+          examples['with non-link navigation items']
+        )
+
+        const $navItem = $('.govuk-service-navigation__item:first-child')
+        const $navLink = $navItem.find('a')
+        const $navText = $navItem.find('.govuk-service-navigation__text')
+
+        expect($navLink).toHaveLength(0)
+        expect($navText).toHaveLength(1)
+        expect($navText.text().trim()).toBe('Navigation item 1')
+      })
+
+      it('renders HTML passed without a link', () => {
+        const $ = render(
+          'service-navigation',
+          examples['with non-link navigation items']
+        )
+
+        const $navItem = $('.govuk-service-navigation__item:nth-child(2)')
+        const $navLink = $navItem.find('a')
+        const $navText = $navItem.find('.govuk-service-navigation__text')
+
+        expect($navLink).toHaveLength(0)
+        expect($navText).toHaveLength(1)
+        expect($navText.html().trim()).toBe('<em>Navigation item 2</em>')
+      })
+    })
+
+    describe('active and current items', () => {
+      it('renders navigation with an active item', () => {
+        const $ = render(
+          'service-navigation',
+          examples['with navigation with an active item']
+        )
+
+        const $activeItem = $('li.govuk-service-navigation__item:nth-child(2)')
+        const $activeLink = $activeItem.find('a')
+        const $activeFallback = $activeItem.find('strong')
+
+        expect($activeLink.attr('aria-current')).toBe('true')
+        expect($activeFallback).toHaveLength(1)
+      })
+
+      it('renders navigation with a current item', () => {
+        const $ = render(
+          'service-navigation',
+          examples['with navigation with a current item']
+        )
+
+        const $activeItem = $('li.govuk-service-navigation__item:nth-child(2)')
+        const $activeLink = $activeItem.find('a')
+        const $activeFallback = $activeItem.find('strong')
+
+        expect($activeLink.attr('aria-current')).toBe('page')
+        expect($activeFallback).toHaveLength(1)
+      })
+    })
+  })
+
+  describe('with service name', () => {
+    it('renders the service name', () => {
+      const $ = render('service-navigation', examples['with service name'])
+      const $component = $('.govuk-service-navigation')
+
+      const $serviceName = $component.find(
+        '.govuk-service-navigation__service-name'
+      )
+
+      expect($serviceName.get(0).tagName).toBe('span')
+      expect($serviceName.text().trim()).toBe('Service name')
+    })
+
+    it('wraps the service name with a link when a url is provided', () => {
+      const $ = render('service-navigation', examples['with service link'])
+      const $component = $('.govuk-service-navigation')
+
+      const $serviceName = $component.find(
+        '.govuk-service-navigation__service-name'
+      )
+      const $serviceLink = $serviceName.find('.govuk-service-navigation__link')
+
+      expect($serviceLink).toHaveLength(1)
+      expect($serviceLink.get(0).tagName).toBe('a')
+      expect($serviceLink.attr('href')).toBe('#/')
+    })
+
+    it('does not use a link when no service url is provided', () => {
+      const $ = render('service-navigation', examples['with service name'])
+      const $component = $('.govuk-service-navigation')
+
+      const $serviceName = $component.find(
+        '.govuk-service-navigation__service-name'
+      )
+      const $serviceLink = $serviceName.find('.govuk-service-navigation__link')
+
+      expect($serviceLink).toHaveLength(0)
+    })
+
+    describe('<section> wrapper', () => {
+      it('renders the container as a <section> if a service name is present', () => {
+        const $ = render('service-navigation', examples['with service name'])
+        const tagName = $('.govuk-service-navigation').get(0).tagName
+
+        expect(tagName.toLowerCase()).toBe('section')
+      })
+
+      it('renders default aria-label on the <section>', () => {
+        const $ = render('service-navigation', examples['with service name'])
+        const $component = $('.govuk-service-navigation')
+
+        expect($component.attr('aria-label')).toBe('Service information')
+      })
+
+      it('renders custom aria-label on the <section>', () => {
+        const $ = render(
+          'service-navigation',
+          examples['with custom aria-label']
+        )
+        const $component = $('.govuk-service-navigation')
+
+        expect($component.attr('aria-label')).toBe('Service name and nav')
+      })
+    })
+  })
+
+  describe('slots', () => {
+    it('inserts HTML from the `start` slot in the right place', () => {
+      const $ = render('service-navigation', examples['with slotted content'])
+
+      // Expected to be first thing in the inner container
+      const $slottedElement = $('.govuk-width-container > :first-child')
+
+      expect($slottedElement.prop('outerHTML')).toBe('<div>[start]</div>')
+    })
+
+    it('inserts HTML from the `end` slot in the right place', () => {
+      const $ = render('service-navigation', examples['with slotted content'])
+
+      // Expected to be last thing in the inner container
+      const $slottedElement = $('.govuk-width-container > :last-child')
+
+      expect($slottedElement.prop('outerHTML')).toBe('<div>[end]</div>')
+    })
+
+    it('renders the component as a <section> if `start` or `end` slots are used', () => {
+      const $ = render('service-navigation', examples['with slotted content'])
+      const tagName = $('.govuk-service-navigation').get(0).tagName
+
+      expect(tagName.toLowerCase()).toBe('section')
+    })
+
+    it('inserts HTML from the `navigationStart` slot in the right place', () => {
+      const $ = render('service-navigation', examples['with slotted content'])
+
+      // Expected to be first thing in the nav list
+      const $slottedElement = $(
+        '.govuk-service-navigation__list > :first-child'
+      )
+
+      expect($slottedElement.prop('outerHTML')).toBe(
+        '<li>[navigation start]</li>'
+      )
+    })
+
+    it('inserts HTML from the `navigationEnd` slot in the right place', () => {
+      const $ = render('service-navigation', examples['with slotted content'])
+
+      // Expected to be first thing in the nav list
+      const $slottedElement = $('.govuk-service-navigation__list > :last-child')
+
+      expect($slottedElement.prop('outerHTML')).toBe(
+        '<li>[navigation end]</li>'
+      )
+    })
+
+    it('renders the <nav> if `navigationStart` or `navigationEnd` slots are used', () => {
+      const $ = render('service-navigation', examples['with slotted content'])
+      const $component = $('.govuk-service-navigation')
+      const $nav = $component.find('nav.govuk-service-navigation__wrapper')
+      const $list = $nav.find('ul.govuk-service-navigation__list')
+
+      expect($nav).toBeDefined()
+      expect($list).toBeDefined()
+    })
+  })
+})
diff --git a/packages/govuk-frontend/src/govuk/init.jsdom.test.mjs b/packages/govuk-frontend/src/govuk/init.jsdom.test.mjs
index c837b24b84..0ccb899b44 100644
--- a/packages/govuk-frontend/src/govuk/init.jsdom.test.mjs
+++ b/packages/govuk-frontend/src/govuk/init.jsdom.test.mjs
@@ -17,11 +17,19 @@ jest.mock(`./components/header/header.mjs`)
 jest.mock(`./components/notification-banner/notification-banner.mjs`)
 jest.mock(`./components/password-input/password-input.mjs`)
 jest.mock(`./components/radios/radios.mjs`)
+jest.mock(`./components/service-navigation/service-navigation.mjs`)
 jest.mock(`./components/skip-link/skip-link.mjs`)
 jest.mock(`./components/tabs/tabs.mjs`)
 
 describe('initAll', () => {
-  const components = ['checkboxes', 'header', 'radios', 'skip-link', 'tabs']
+  const components = [
+    'checkboxes',
+    'header',
+    'radios',
+    'service-navigation',
+    'skip-link',
+    'tabs'
+  ]
 
   const componentsThatTakeConfig = [
     'accordion',
diff --git a/packages/govuk-frontend/src/govuk/init.mjs b/packages/govuk-frontend/src/govuk/init.mjs
index c909684568..2aaaf86bc0 100644
--- a/packages/govuk-frontend/src/govuk/init.mjs
+++ b/packages/govuk-frontend/src/govuk/init.mjs
@@ -9,6 +9,7 @@ import { Header } from './components/header/header.mjs'
 import { NotificationBanner } from './components/notification-banner/notification-banner.mjs'
 import { PasswordInput } from './components/password-input/password-input.mjs'
 import { Radios } from './components/radios/radios.mjs'
+import { ServiceNavigation } from './components/service-navigation/service-navigation.mjs'
 import { SkipLink } from './components/skip-link/skip-link.mjs'
 import { Tabs } from './components/tabs/tabs.mjs'
 import { SupportError } from './errors/index.mjs'
@@ -41,6 +42,7 @@ function initAll(config) {
     [NotificationBanner, config.notificationBanner],
     [PasswordInput, config.passwordInput],
     [Radios],
+    [ServiceNavigation],
     [SkipLink],
     [Tabs]
   ])
diff --git a/packages/govuk-frontend/tasks/build/package.unit.test.mjs b/packages/govuk-frontend/tasks/build/package.unit.test.mjs
index 3041b2b5ef..20d571d47d 100644
--- a/packages/govuk-frontend/tasks/build/package.unit.test.mjs
+++ b/packages/govuk-frontend/tasks/build/package.unit.test.mjs
@@ -191,6 +191,7 @@ describe('packages/govuk-frontend/dist/', () => {
           export { NotificationBanner } from './components/notification-banner/notification-banner.mjs';
           export { PasswordInput } from './components/password-input/password-input.mjs';
           export { Radios } from './components/radios/radios.mjs';
+          export { ServiceNavigation } from './components/service-navigation/service-navigation.mjs';
           export { SkipLink } from './components/skip-link/skip-link.mjs';
           export { Tabs } from './components/tabs/tabs.mjs';
           export { createAll, initAll } from './init.mjs';