diff --git a/css/components/subsites-menu.css b/css/components/subsites-menu.css
new file mode 100644
index 00000000..20bf5789
--- /dev/null
+++ b/css/components/subsites-menu.css
@@ -0,0 +1,155 @@
+/**
+ * @file CSS for the subsites extras functionality.
+ */
+
+/*
+  The variables set here are defaults we can use for the subsites extras
+  features. We should have a good amount here, and their names should be
+  self-explanatory.
+
+  To use them, you can add more classes in your theme's CSS file, and set
+  your variables accordingly. You can see examples at the bottom of this file.
+
+  .subsite-extra--color-yellow {
+    --subsite-extra-color: yellow;
+    --subsite-extra-color-contrast: black;
+    --subsite-extra-region-bg-color: black;
+    --image-with-caption-bg-color: yellow;
+    --button-text-color: black;
+    --button-bg-color: yellow;
+    --button-border-color: black;
+  }
+
+  Remember, the .subsite-extra class is on the body element, so you can override
+  any variables that are set in variables.css (e.g. --color-accent).
+
+  Also, you can use this class to override any CSS for components on the page.
+  For example:
+  .subsite-extra--color-yellow .lgd-image--has-caption {
+    padding: var(--spacing-large);
+    background-color: yellow;
+    border: 0;
+  }
+*/
+
+.subsite-extra {
+  --subsite-extra-color: var(--color-accent);
+  --subsite-extra-color-contrast: var(--color-white);
+  --subsite-extra-link-color: var(--subsite-extra-color-contrast);
+  --subsite-extra-link-color-hover: var(--subsite-extra-color);
+  --subsite-extra-link-color-active-trail: var(--subsite-extra-color);
+  --subsite-extra-link-bg-color: var(--subsite-extra-color);
+  --subsite-extra-link-bg-color-hover: var(--subsite-extra-color-contrast);
+  --subsite-extra-menu-title-color: var(--subsite-extra-color);
+  --subsite-extra-region-bg-color: var(--color-white);
+  --subsite-extra-region-padding-horizontal: var(--spacing);
+  --subsite-extra-region-padding-vertical: var(--spacing);
+  --subsite-extra-menu-items-gap: var(--spacing);
+  --subsite-extra-menu-title-font-family: var(--font-primary);
+}
+
+/* This would be changed in the menu-subsites.css */
+.lgd-region--subsites-menu {
+  padding-block: var(--subsite-extra-region-padding-vertical);
+  padding-inline: var(--subsite-extra-region-padding-horizontal);
+  background-color: var(--subsite-extra-region-bg-color);
+}
+
+.lgd-region--subsites-menu .subsite-extra__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing);
+}
+
+@media screen and (min-width: 48rem) {
+  .lgd-region--subsites-menu .subsite-extra__header-toggle {
+    display: none;
+  }
+}
+
+.lgd-region--subsites-menu .subsite-extra__title {
+  margin-bottom: 0;
+}
+
+.lgd-region--subsites-menu .subsite-extra__title > a {
+  color: var(--subsite-extra-menu-title-color);
+  font-family: var(--subsite-extra-menu-title-font-family);
+}
+
+.lgd-region--subsites-menu .menu {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--subsite-extra-menu-items-gap);
+  margin-top: var(--spacing);
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.lgd-region--subsites-menu .menu.subsite-extra-menu {
+  display: none;
+}
+.lgd-region--subsites-menu .menu.subsite-extra-menu--active {
+  display: flex;
+}
+
+.lgd-region--subsites-menu .menu > .menu-item {
+  width: 100%;
+}
+
+@media screen and (min-width: 48rem) {
+  .lgd-region--subsites-menu .menu.subsite-extra-menu {
+    display: flex;
+  }
+  .lgd-region--subsites-menu .menu > .menu-item {
+    width: auto;
+  }
+}
+
+.lgd-region--subsites-menu .menu > .menu-item a {
+  display: block;
+  padding-inline: var(--spacing);
+  padding-block: var(--spacing);
+  color: var(--subsite-extra-link-color);
+  background-color: var(--subsite-extra-link-bg-color);
+}
+
+.lgd-region--subsites-menu .menu > .menu-item--active-trail a,
+.lgd-region--subsites-menu .menu > .menu-item a:focus,
+.lgd-region--subsites-menu .menu > .menu-item a:hover {
+  color: var(--subsite-extra-link-color-hover);
+  background-color: var(--subsite-extra-link-bg-color-hover);
+}
+
+/*
+  Set your custom colours.
+  The class comes from values in the field localgov_subsites_theme
+   - be sure to set an accessible contrast color.
+
+  Here are some samples (they won't work unless you have the field set up).
+*/
+.subsite-extra--color-yellow {
+  --subsite-extra-color: yellow;
+  --subsite-extra-color-contrast: black;
+  --subsite-extra-region-bg-color: black;
+  --image-with-caption-bg-color: yellow;
+  --button-text-color: black;
+  --button-bg-color: yellow;
+  --button-border-color: black;
+}
+
+.subsite-extra--color-hot_pink {
+  --subsite-extra-color: hotpink;
+  --subsite-extra-color-contrast: black;
+}
+
+.subsite-extra--color-cool_cucumber {
+  --subsite-extra-color: #01642b;
+  --subsite-extra-color-contrast: #8af670;
+}
+
+.subsite-extra--color-theme_b {
+  --subsite-extra-color: #000cb6;
+  --subsite-extra-color-contrast: var(--color-white);
+}
diff --git a/js/subsites-menu.js b/js/subsites-menu.js
new file mode 100644
index 00000000..4480be7a
--- /dev/null
+++ b/js/subsites-menu.js
@@ -0,0 +1,66 @@
+/**
+ * @file JS file for the subsites-menu component.
+ */
+
+(function subsitesMenuScript(Drupal) {
+  Drupal.behaviors.subsitesMenu = {
+    attach: function (context) {
+      // This variable will be used later to make sure that the window
+      // was actually resized.
+      let windowWidth = window.innerWidth;
+
+      const subsitesMenuToggle = document.querySelector(
+        ".subsite-extra__header-toggle-button"
+      );
+      const subsitesMenu = document.querySelector(".subsite-extra-menu");
+
+      subsitesMenuToggle.addEventListener("click", function () {
+        subsitesMenuToggle.setAttribute(
+          "aria-expanded",
+          subsitesMenuToggle.getAttribute("aria-expanded") === "true"
+            ? "false"
+            : "true"
+        );
+        subsitesMenu.classList.toggle("subsite-extra-menu--active");
+      });
+
+      function handleReset() {
+        subsitesMenuToggle.setAttribute("aria-expanded", "false");
+        subsitesMenu.classList.remove("subsite-extra-menu--active");
+      }
+
+      // If the window is resized to more than 768px, reset the menu.
+      function handleWindowResized() {
+        if (window.innerWidth === windowWidth) {
+          return;
+        } else {
+          windowWidth = window.innerWidth;
+        }
+        if (windowWidth > 768) {
+          handleReset();
+        }
+      }
+
+      // Close the menu when the escape key is pressed.
+      context.addEventListener("keydown", function (e) {
+        if (e.key == "Escape") {
+          e.preventDefault();
+          handleReset();
+          subsitesMenuToggle.focus();
+        }
+      });
+
+      // Close the menu when a click is made outside of it.
+      document.addEventListener("click", function (e) {
+        if (!e.target.closest("#lgd-header__nav--subsites-menu")) {
+          handleReset();
+        }
+      });
+
+      window.addEventListener(
+        "resize",
+        Drupal.debounce(handleWindowResized, 50, false)
+      );
+    },
+  };
+})(Drupal);
diff --git a/localgov_base.info.yml b/localgov_base.info.yml
index 69be0606..38475efc 100644
--- a/localgov_base.info.yml
+++ b/localgov_base.info.yml
@@ -15,6 +15,7 @@ regions:
   mobile_search: "Mobile search"
   primary_menu: "Primary menu"
   secondary_menu: "Secondary menu"
+  subsites_menu: "Subsites menu"
   banner: "Banner"
   breadcrumb: "Breadcrumb"
   messages: "Messages"
diff --git a/localgov_base.libraries.yml b/localgov_base.libraries.yml
index 5dabe4cf..9199633e 100644
--- a/localgov_base.libraries.yml
+++ b/localgov_base.libraries.yml
@@ -291,6 +291,16 @@ embedded-views:
     theme:
       css/components/embedded-views.css: {}
 
+subsites-menu:
+  css:
+    theme:
+      css/components/subsites-menu.css: {}
+  js:
+    js/subsites-menu.js: {}
+  dependencies:
+    - core/drupal
+    - core/drupal.debounce
+
 localgov_eu_cookie_compliance:
   css:
     theme:
diff --git a/templates/block/block--system-menu-block.html.twig b/templates/block/block--system-menu-block.html.twig
index c6b115a4..c4e4d8b0 100644
--- a/templates/block/block--system-menu-block.html.twig
+++ b/templates/block/block--system-menu-block.html.twig
@@ -40,7 +40,7 @@
   ]
 %}
 
-{# 
+{#
   We add libraries here for specific menus.
 #}
 {% if not localgov_base_remove_css %}
@@ -49,6 +49,7 @@
   {% endif %}
 {% endif %}
 
+
 {% set heading_id = attributes.id ~ '-menu'|clean_id %}
 <nav aria-labelledby="{{ heading_id }}"{{ attributes.addClass(classes)|without('role', 'aria-labelledby') }}>
   {# Label. If not displayed, we still provide it for screen readers. #}
diff --git a/templates/layout/header.html.twig b/templates/layout/header.html.twig
index ee11d2a2..5cb96a20 100644
--- a/templates/layout/header.html.twig
+++ b/templates/layout/header.html.twig
@@ -69,4 +69,9 @@
       </div>
     </div>
   </div>
+  {% if has_subsites_menu %}
+    <div id="lgd-header__nav--subsites-menu" class="lgd-header__nav lgd-header__nav--subsites-menu">
+      {{ page.subsites_menu }}
+    </div>
+  {% endif %}
 </header>
diff --git a/templates/layout/region.html.twig b/templates/layout/region.html.twig
index b1a6783e..47ce61b2 100644
--- a/templates/layout/region.html.twig
+++ b/templates/layout/region.html.twig
@@ -21,25 +21,29 @@
   ]
 %}
 
-{# 
-  If we need to create a new template just to add a library to it, 
+{#
+  If we need to create a new template just to add a library to it,
   let's do that here instead. We could do this in hook_preprocess_region()
-  but I prefer to keep as much as I can in these templates so we don't 
+  but I prefer to keep as much as I can in these templates so we don't
   have to go hunting so much.
 #}
 {% if not localgov_base_remove_css %}
   {% if region == 'tabs' %}
     {{ attach_library('localgov_base/region-tabs') }}
-  {% endif %} 
+  {% endif %}
+
+  {% if region == 'subsites_menu' %}
+    {{ attach_library('localgov_base/subsites-menu') }}
+  {% endif %}
 
   {% if region == 'sidebar_first' or region == 'sidebar_second' %}
     {{ attach_library('localgov_base/sidebar') }}
   {% endif %}
 {% endif %}
 
-{# 
+{#
   Often if we need a custom region template, it's because that region
-  needs to be full-width. Let's (at least for now), create an 
+  needs to be full-width. Let's (at least for now), create an
   array of regions that might need that, and then not print the container
   class for those regions.
 
@@ -47,10 +51,10 @@
   for each of these.
 
   The reason the header regions are listed here is because we want them to
-  take up 100% of their container, rather than the screen. We will take care 
+  take up 100% of their container, rather than the screen. We will take care
   of their layout via CSS in the header.css file.
 #}
-{% 
+{%
   set full_width_regions = [
     'banner',
     'header',
@@ -60,12 +64,12 @@
     'sidebar_first',
     'sidebar_second',
     'content'
-  ] 
+  ]
 %}
 
 {% if content %}
   <div{{ attributes.addClass(classes) }}>
-    
+
     {% if region not in full_width_regions %}
       <div class="lgd-container padding-horizontal">
     {% endif %}
@@ -73,9 +77,9 @@
     <div class="lgd-region__inner lgd-region__inner--{{ region|clean_class }}">
       {{ content }}
     </div>
-    
+
     {% if region not in full_width_regions %}
-      </div> 
+      </div>
     {% endif %}
 
   </div>
diff --git a/templates/navigation/menu--subsites.html.twig b/templates/navigation/menu--subsites.html.twig
new file mode 100644
index 00000000..70d35aec
--- /dev/null
+++ b/templates/navigation/menu--subsites.html.twig
@@ -0,0 +1,89 @@
+{#
+/**
+ * @file
+ * Theme override to display a menu.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link url, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ */
+#}
+
+{% if subsite_homepage_link %}
+  <div class="subsite-extra__header">
+    <h2 class="subsite-extra__title">
+      {{ subsite_homepage_link }}
+    </h2>
+    <div class="subsite-extra__header-toggle">
+      <button
+        class="subsite-extra__header-toggle-button"
+        aria-controls="subsite-extra-menu"
+        aria-expanded="false">
+        <span class="subsite-extra__header-toggle-text">{{ 'Section Menu'|t }}</span>
+      </button>
+    </div>
+  </div>
+{% endif %}
+
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see https://twig.symfony.com/doc/1.x/tags/macro.html
+#}
+{{ menus.menu_links(items, attributes, 0, menu_name, '') }}
+
+{% macro menu_links(items, attributes, menu_level, menu_name) %}
+  {% import _self as menus %}
+
+    {%
+      set menu_classes = [
+        'subsite-extra-menu',
+        'menu',
+        'menu--' ~ menu_name,
+      ]
+    %}
+
+    {%
+      set sub_menu_classes = [
+        'menu',
+        'menu-' ~ menu_name ~ '--sub-menu',
+        'menu--sub-menu',
+      ]
+    %}
+
+  {% if items %}
+    {% if menu_level == 0 %}
+      <ul{{ attributes.addClass(menu_classes).setAttribute('id', 'subsite-extra-menu') }}>
+    {% else %}
+      <ul{{ attributes.removeClass(menu_classes).addClass(sub_menu_classes) }}>
+    {% endif %}
+    {% for item in items %}
+      {%
+        set classes = [
+          'menu-item',
+          item.is_expanded ? 'menu-item--expanded',
+          item.is_collapsed ? 'menu-item--collapsed',
+          item.in_active_trail ? 'menu-item--active-trail',
+        ]
+      %}
+      <li{{ item.attributes.addClass(classes) }}>
+        {{ link(item.title, item.url) }}
+        {% if item.below %}
+          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}