Added subsites_menu region.

css/components/menu-subsites.css

@@ -0,0 +1,52 @@
+.menu--subsites__title {
+  font-weight: bold;
+  font-size: var(--font-size-h2);
+}
+
+.menu--subsites {
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.menu--subsites > .menu-item a {
+  display: block;
+  padding: var(--spacing);
+  color: var(--color-white);
+
+}
+
+.menu--subsites > .menu-item--active-trail a,
+.menu--subsites > .menu-item a:focus,
+.menu--subsites > .menu-item a:hover {
+  color: var(--color-black);
+  background-color: var(--color-white);
+}
+
+@media screen and (min-width: 48rem) {
+
+  .lgd-region--subsites-menu .menu--subsites {
+    display: flex;
+  }
+
+  .menu--subsites > .menu-item {
+    margin-right: var(--spacing-smaller);
+    margin-left: var(--spacing-smaller);
+  }
+
+  .menu--subsites > .menu-item a {
+    border: 1px solid transparent;
+    background-color: transparent;
+  }
+
+  .menu--subsites > .menu-item--active-trail a,
+  .menu--subsites > .menu-item a:focus,
+  .menu--subsites > .menu-item a:hover {
+    color: var(--color-black);
+    background-color: var(--color-white);
+  }
+
+  .menu--subsites > .menu-item a:hover {
+    border-color: var(--color-white);
+  }
+}

css/components/subsite-extra.css

@@ -0,0 +1,61 @@
+/* If you want to be more custom, you need to be mindful of the default mode
+  The best approach would be to add a variable to variables.css for the thing you want to change,
+  change it in the correct component file and add the new variable below. 
+  This gives the default subsite theme something to fallback on.
+*/
+
+/* For demonstration purposes we've put have examples which don't have custom variables. 
+   This means we've repeated code from elsewhere 
+*/
+/* These variables should be added to the variables.css file */
+body {
+  --subsite-extra-bg-color: transparent;
+  --subsite-extra-link-color: white;
+}
+
+/* This would be changed in the menu-subsites.css */
+.lgd-region--subsites-menu {
+  background-color: var(--subsite-extra-bg-color);
+}
+
+.subsite-extra .menu--subsites > .menu-item a {
+  color: var(--subsite-extra-link-color);
+}
+
+.subsite-extra .menu--subsites > .menu-item--active-trail a, 
+.subsite-extra .menu--subsites > .menu-item a:focus, 
+.subsite-extra .menu--subsites > .menu-item a:hover {
+  color: black
+}
+
+/* This should be the beginning of this file */
+
+/* set your custom colours - the class comes from values in the field localgov_subsites_theme
+   be sure to set an accessible contrast color */
+.subsite-extra--color-hot_pink {
+  --subsite-color: hotpink;
+  --subsite-color-contrast: black;
+}
+
+.subsite-extra--color-cool_cucumber {
+  --subsite-color: #01642B;
+  --subsite-color-contrast: #8AF670;
+}
+
+/* add all the variables that you want to change colour
+  subsite-extra--color-theme_a is the default colours 
+  You might want to use that to get the menu but not have a theme.
+*/
+.subsite-extra:not(.subsite-extra--color-theme_a) {
+  --header-link-color: var(--subsite-color-contrast);
+  --heading-2-color: var(--subsite-color);
+  --call-out-box-bg-color:  var(--subsite-color);
+  --call-out-box-text-color: var(--subsite-color-contrast);
+  --fact-box-bg-light: var(--subsite-color);
+  --fact-box-border-color: var(--subsite-color-contrast);
+  --color-section-pre-footer-bg: var(--subsite-color);
+  --color-pre-footer-link: var(--subsite-color-contrast);
+  --button-bg-color: var(--subsite-color);
+  --subsite-extra-bg-color: var(--subsite-color);
+  --subsite-extra-link-color: var(--subsite-color-contrast);
+}

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"

localgov_base.libraries.yml

@@ -82,6 +82,11 @@ menu-main:
     theme:
       css/components/menu-main.css: {}
 
+menu-subsites:
+  css:
+    theme:
+      css/components/menu-subsites.css: {}
+
 page-title-block:
   css:
     theme:
@@ -291,6 +296,11 @@ embedded-views:
     theme:
       css/components/embedded-views.css: {}
 
+subsite-extra:
+  css:
+    theme:
+      css/components/subsite-extra.css: {}
+
 localgov_eu_cookie_compliance:
   css:
     theme:

templates/block/block--system-menu-block.html.twig

@@ -47,8 +47,13 @@
   {% if derivative_plugin_id == 'main' %}
     {{ attach_library('localgov_base/menu-main') }}
   {% endif %}
+
+  {% if derivative_plugin_id == 'subsites' %}
+    {{ attach_library('localgov_base/menu-subsites') }}
+  {% 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. #}

templates/layout/header.html.twig

@@ -69,4 +69,9 @@
       </div>
     </div>
   </div>
+  {% if has_subsites_menu %}
+    <div id="lgd-header__nav--subsites" class="lgd-header__nav lgd-header__nav--subsites">
+      {{ page.subsites_menu }}
+    </div>
+  {% endif %}
 </header>

templates/navigation/menu--subsites.html.twig

@@ -0,0 +1,78 @@
+{#
+/**
+ * @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="menu--subsites__title">
+    {{ subsite_homepage_link }}
+  </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 = [
+        '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) }}>
+    {% 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 %}