From fe89d609066d1d404b2c7433029c8d6869440687 Mon Sep 17 00:00:00 2001
From: alex-ju <alex-ju@users.noreply.github.com>
Date: Fri, 22 Dec 2017 21:44:20 +0000
Subject: [PATCH 1/9] Define top level navigation

the ordering of the top level navigation (Styles, Components, Patterns) is defined in config/navigation.json
---
 config/navigation.json | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 config/navigation.json

diff --git a/config/navigation.json b/config/navigation.json
new file mode 100644
index 0000000000..10e520bbd4
--- /dev/null
+++ b/config/navigation.json
@@ -0,0 +1,18 @@
+[
+  {
+    "label": "About",
+    "url": ""
+  },
+  {
+    "label": "Styles",
+    "url": "styles"
+  },
+  {
+    "label": "Components",
+    "url": "components"
+  },
+  {
+    "label": "Patterns",
+    "url": "patterns"
+  }
+]

From f15eb7866eddcd29d45de14b0a0954983e660a7c Mon Sep 17 00:00:00 2001
From: alex-ju <alex-ju@users.noreply.github.com>
Date: Fri, 22 Dec 2017 21:45:43 +0000
Subject: [PATCH 2/9] Build navigation plugin

Returns a navigation object based on config file and folder structure
---
 lib/file-helper.js | 21 ++++++++++++++++++
 lib/navigation.js  | 54 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 lib/navigation.js

diff --git a/lib/file-helper.js b/lib/file-helper.js
index 68107fe7f3..bae61b83a6 100644
--- a/lib/file-helper.js
+++ b/lib/file-helper.js
@@ -1,6 +1,7 @@
 'use strict'
 
 const fs = require('fs')
+const path = require('path')
 const nunjucks = require('nunjucks')
 
 // This helper function takes a path of a file and
@@ -52,3 +53,23 @@ exports.getHTMLCode = path => {
 
   return html
 }
+
+// This helper function takes a path and
+// returns the directories found under that path
+exports.getDirectories = itemPath => {
+  let files
+  let directories
+  try {
+    files = fs.readdirSync(itemPath)
+  } catch (err) {
+    if (err.code === 'ENOENT') {
+      console.log(err.message)
+    } else {
+      throw err
+    }
+  }
+  if (files) {
+    directories = files.filter(filePath => fs.statSync(path.join(itemPath, filePath)).isDirectory())
+  }
+  return directories
+}
diff --git a/lib/navigation.js b/lib/navigation.js
new file mode 100644
index 0000000000..dc39e152b6
--- /dev/null
+++ b/lib/navigation.js
@@ -0,0 +1,54 @@
+// Navgation metalsmith plugin
+// builds a navigation object based on config file and folder structure
+
+// files: array containing information about every page
+// metalsmith: object containing global information such as meta data
+// done: function which must be called when the plugin has finished working
+
+const paths = require('../config/paths.json')
+const navigation = require('../config/navigation.json')
+
+const fileHelper = require('../lib/file-helper.js')
+
+module.exports = function () {
+  return function (files, metalsmith, done) {
+    // iterate main navigation item defined in navigation.json
+    for (let item in navigation) {
+      // if we have a navigation url and it is not homepage then look for subitems
+      if (navigation[item].url && navigation[item].url !== '') {
+        // define source path
+        let itemPath = paths.source + navigation[item].url
+        // get directories under main navigation item (e.g. ['breadcrumbs', 'checkboxes', ...])
+        let directories = fileHelper.getDirectories(itemPath)
+        // if we have directories convert them into menu items
+        if (directories) {
+          // initialise child navigation items as array
+          navigation[item].items = []
+          // convert directory into a navigation item adding url, label and theme
+          for (let dir in directories) {
+            let url = navigation[item].url + '/' + directories[dir]
+            let frontmatter = files[url + '/index.html']
+            // if we have frontmatter for that file, create subitem
+            if (frontmatter) {
+              let subitem = {
+                'url': url,
+                'label': frontmatter.title
+              }
+              // if frontmatter contains `theme` data, attach it to navigation item for grouping
+              if (frontmatter.theme) {
+                subitem.theme = frontmatter.theme
+              }
+              // add subitem to navigation
+              navigation[item].items.push(subitem)
+            }
+          }
+        }
+      }
+    }
+
+    // add navigation to global variables
+    metalsmith.metadata().navigation = navigation
+
+    done()
+  }
+}

From 667dc4f30b7c029b6baf3283c281ac94b1333a99 Mon Sep 17 00:00:00 2001
From: alex-ju <alex-ju@users.noreply.github.com>
Date: Fri, 22 Dec 2017 21:46:07 +0000
Subject: [PATCH 3/9] Initialise navigation in metalsmith

---
 lib/metalsmith.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/lib/metalsmith.js b/lib/metalsmith.js
index 9208b71f82..da30bc7d06 100644
--- a/lib/metalsmith.js
+++ b/lib/metalsmith.js
@@ -9,6 +9,8 @@ const permalinks = require('metalsmith-permalinks') // apply a permalink pattern
 const sass = require('metalsmith-sass')             // convert Sass files to CSS using LibSass
 
 const debug = require('./debug')                    // debug plugin
+const navigation = require('./navigation.js')       // navigation plugin
+
 const paths = require('../config/paths.json')       // specify paths to main working directories
 const fileHelper = require('../lib/file-helper.js') // helper function to operate on files
 
@@ -103,6 +105,9 @@ module.exports = metalsmith(__dirname) // __dirname defined by node.js: name of
   // apply a permalink pattern to files
   .use(permalinks())
 
+  // apply navigation
+  .use(navigation())
+
   // apply layouts to source files
   .use(layouts({
     engine: 'nunjucks',

From ed1e46947d4db45f78c292b965f0cb0991695494 Mon Sep 17 00:00:00 2001
From: alex-ju <alex-ju@users.noreply.github.com>
Date: Fri, 22 Dec 2017 21:46:37 +0000
Subject: [PATCH 4/9] Generate top level navigation dynamically

---
 views/partials/_navigation.njk | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/views/partials/_navigation.njk b/views/partials/_navigation.njk
index 30ab44c299..a5ba7a0461 100644
--- a/views/partials/_navigation.njk
+++ b/views/partials/_navigation.njk
@@ -1,16 +1,9 @@
 <nav class="app-c-navigation govuk-h-clearfix">
   <ul class="app-c-navigation__list">
-    <li{% if path == '' %}  class="app-c-navigation--current-page"{% endif %}>
-      <a href="/">About</a>
-    </li>
-    <li{% if 'styles' in path %}  class="app-c-navigation--current-page"{% endif %}>
-      <a href="/styles">Styles</a>
-    </li>
-    <li{% if 'components' in path %}  class="app-c-navigation--current-page"{% endif %}>
-      <a href="/components">Components</a>
-    </li>
-    <li{% if 'patterns' in path %}  class="app-c-navigation--current-page"{% endif %}>
-      <a href="/patterns">Patterns</a>
+    {% for item in navigation %}
+    <li{% if path == item.url or item.url and item.url in path %} class="app-c-navigation--current-page"{% endif %}>
+      <a href="/{{ item.url }}">{{ item.label }}</a>
     </li>
+    {% endfor %}
   </ul>
 </nav>

From 45a05416befcca1ae062b4652943afb7c53cb122 Mon Sep 17 00:00:00 2001
From: alex-ju <alex-ju@users.noreply.github.com>
Date: Fri, 22 Dec 2017 21:46:53 +0000
Subject: [PATCH 5/9] Generate mobile navigation dynamically

---
 views/partials/_mobile-navigation.njk | 78 +++++++--------------------
 1 file changed, 20 insertions(+), 58 deletions(-)

diff --git a/views/partials/_mobile-navigation.njk b/views/partials/_mobile-navigation.njk
index 28a453f2eb..74c75d354c 100644
--- a/views/partials/_mobile-navigation.njk
+++ b/views/partials/_mobile-navigation.njk
@@ -1,68 +1,30 @@
 <nav id="app-c-mobile-nav" class="app-c-mobile-nav js-app-mobile-nav" role="navigation">
   <ul class="app-c-mobile-nav__list">
+    {% for item in navigation %}
     <li>
-      <a href="/about" class="js-mobile-nav-subnav-toggler">About</a>
-    </li>
-    <li>
-      <a href="/styles" class="js-mobile-nav-subnav-toggler">Styles</a>
+      <a class="js-mobile-nav-subnav-toggler" href="/{{ item.url }}">{{ item.label }}</a>
+      {% if item.items %}
       <ul class="app-c-mobile-nav__subnav js-app-mobile-nav-subnav app-c-mobile-nav__subnav--hidden">
-        <li>
-          <a href="styles">Styles overview</a>
-        </li>
-        <li>
-          <a href="#">Colour</a>
-        </li>
-        <li>
-          <a href="#">Icons</a>
-        </li>
-      </ul>
-    </li>
-    <li>
-      <a href="/components" class="js-mobile-nav-subnav-toggler">Components</a>
-      <ul class="app-c-mobile-nav__subnav js-app-mobile-nav-subnav app-c-mobile-nav__subnav--hidden">
-        <li>
-          <a href="/components">Components overview</a>
-        </li>
-        <li>
-          <a href="/back-link">Back link</a>
-        </li>
-        <li>
-          <a href="/breadcrumb">Breadcrumb</a>
-        </li>
-        <li>
-          <a href="/button">Button</a>
-        </li>
-        <li>
-          <a href="/button">Checkbox</a>
-        </li>
-        <li>
-          <a href="/cookie-banner">Cookie banner</a>
-        </li>
-      </ul>
-    </li>
-    <li>
-      <a href="/patterns" class="js-mobile-nav-subnav-toggler">Patterns</a>
-      <ul class="app-c-mobile-nav__subnav">
-        <li class="app-c-mobile-nav__current-page"><a href="/patterns">Patterns overview</a></li>
-        <li>
-          <h4 class="app-c-mobile-nav__theme">ASK USERS FOR...</h4>
+        <li{% if path == item.url %} class="current-page"{% endif %}>
+          <a href="/{{ item.url }}">{{ item.label }} overview</a>
+        </li>
+
+        {% for theme, items in item.items | groupby("theme") %}
+          {% if theme != 'undefined' %}
+            <h4 class="app-c-mobile-nav__theme">{{ theme }}</h4>
+          {% endif %}
           <ul class="app-c-mobile-nav__theme-nav">
-            <li><a href="#">Addresses</a></li>
-            <li><a href="#">Dates</a></li>
-            <li><a href="#">Email addresses</a></li>
-            <li><a href="#">Names</a></li>
-            <li><a href="#">National Insurance Numbers</a></li>
-            <li><a href="#">Passwords</a></li>
+          {% for subitem in items %}
+            <li{% if path == subitem.url %} class="current-page"{% endif %}>
+              <a href="/{{ subitem.url }}">{{ subitem.label }}</a>
+            </li>
+          {% endfor %}
           </ul>
-        </li>
-        <li>
-          <h4 class="app-c-mobile-nav__theme">ASK USERS FOR...</h4>
-          <ul class="app-c-mobile-nav__theme-nav">
-            <li><a href="#">Addresses</a></li>
-            <li><a href="#">Dates</a></li>
-          </ul>
-        </li>
+        {% endfor %}
+
       </ul>
+      {% endif %}
     </li>
+    {% endfor %}
   </ul>
 </nav>

From c0de4c521e7926b5ecdcab4b1beabbd94b7c4fad Mon Sep 17 00:00:00 2001
From: alex-ju <alex-ju@users.noreply.github.com>
Date: Fri, 22 Dec 2017 21:48:10 +0000
Subject: [PATCH 6/9] Generate toc navigation dynamically

These files are identical and should be replaced with a single _toc.njk file
---
 views/partials/_toc-components.njk | 62 ++++++++----------------------
 views/partials/_toc-patterns.njk   | 60 +++++++++--------------------
 2 files changed, 35 insertions(+), 87 deletions(-)

diff --git a/views/partials/_toc-components.njk b/views/partials/_toc-components.njk
index d4f5b903e2..39f0c6b663 100644
--- a/views/partials/_toc-components.njk
+++ b/views/partials/_toc-components.njk
@@ -1,49 +1,21 @@
 <nav class="app-c-toc">
   <ul class="app-c-toc__section">
-    <li class="app-c-toc__section-item{% if path == 'components/back-link' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/back-link/">Back link</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'components/breadcrumbs' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/breadcrumbs/">Breadcrumbs</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'components/button' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/button/">Button</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'components/checkboxes' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/checkboxes/">Checkboxes</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'components/date-input' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/date-input/">Date input</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'components/fieldset' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/fieldset/">Fieldset</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'components/file-upload' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/file-upload/">File upload</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'components/panel' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/panel/">Panel</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'components/phase-banner' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/phase-banner/">Phase banner</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'components/radios' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/radios/">Radios</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'components/select' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/select/">Select</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'components/skip-link' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/skip-link/">Skip link</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'components/tag' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/tag/">Tag</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'components/textarea' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/textarea/">Textarea</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'components/text-input' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/components/text-input/">Text input</a>
-    </li>
+
+    {% for item in navigation %}
+      {% if item.url in path %}
+      {% if item.items %}
+        {% for theme, items in item.items | groupby("theme") %}
+          {% if theme != 'undefined' %}
+            <h4 class="govuk-caption-m">{{ theme }}</h4>
+          {% endif %}
+          {% for subitem in items %}
+            <li class="app-c-toc__section-item{% if subitem.url == path %} app-c-toc__section-item--current{% endif %}">
+              <a href="/{{ subitem.url }}">{{ subitem.label }}</a>
+            </li>
+          {% endfor %}
+        {% endfor %}
+      {% endif %}
+      {% endif %}
+    {% endfor %}
   </ul>
 </nav>
diff --git a/views/partials/_toc-patterns.njk b/views/partials/_toc-patterns.njk
index 8afa661167..f0e2930340 100644
--- a/views/partials/_toc-patterns.njk
+++ b/views/partials/_toc-patterns.njk
@@ -1,46 +1,22 @@
 <nav class="app-c-toc">
   <ul class="app-c-toc__section">
-    <li class="app-c-toc__section-item{% if path == 'patterns/addresses' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/patterns/addresses/">Addresses</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'patterns/check-a-service-is-suitable' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/patterns/check-a-service-is-suitable/">Check a service is suitable</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'patterns/check-answers' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/patterns/check-answers/">Check answers</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'patterns/confirm-an-email-address' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/patterns/confirm-an-email-address/">Confirm an email address</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'patterns/confirmation-pages' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/patterns/confirmation-pages/">Confirmation pages</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'patterns/create-a-username' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/patterns/create-a-username/">Create a username</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'patterns/create-accounts' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/patterns/create-accounts/">Create accounts</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'patterns/dates' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/patterns/dates/">Dates</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'patterns/email-addresses' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/patterns/email-addresses/">Email addresses</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'patterns/fill-in-a-form' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/patterns/fill-in-a-form/">Fill in a form</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'patterns/names' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/patterns/names/">Names</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'patterns/national-insurance-numbers' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/patterns/national-insurance-numbers/">National Insurance numbers</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'patterns/passwords' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/patterns/passwords/">Passwords</a>
-    </li>
-    <li class="app-c-toc__section-item{% if path == 'patterns/question-pages' %} app-c-toc__section-item--current{% endif %}">
-      <a href="/patterns/question-pages/">Question pages</a>
-    </li>
+
+    {% for item in navigation %}
+      {% if item.url in path %}
+
+      {% set items = item.items or [] %}
+      {% for theme, items in items | groupby("theme") %}
+        {% if theme != 'undefined' %}
+          <h4 class="govuk-caption-m">{{ theme }}</h4>
+        {% endif %}
+        {% for subitem in items %}
+          <li class="app-c-toc__section-item{% if subitem.url == path %} app-c-toc__section-item--current{% endif %}">
+            <a href="/{{ subitem.url }}">{{ subitem.label }}</a>
+          </li>
+        {% endfor %}
+      {% endfor %}
+
+      {% endif %}
+    {% endfor %}
   </ul>
 </nav>

From 402c5c42c075ebef8bdc4a369733df523cd968a9 Mon Sep 17 00:00:00 2001
From: alex-ju <alex-ju@users.noreply.github.com>
Date: Thu, 4 Jan 2018 15:36:22 +0000
Subject: [PATCH 7/9] Use a single layout for patterns and components

---
 src/components/back-link/index.md.njk         |  2 +-
 src/components/breadcrumbs/index.md.njk       |  2 +-
 src/components/button/index.md.njk            |  2 +-
 src/components/checkboxes/index.md.njk        |  2 +-
 src/components/date-input/index.md.njk        |  2 +-
 src/components/fieldset/index.md.njk          |  2 +-
 src/components/file-upload/index.md.njk       |  2 +-
 src/components/index.md.njk                   |  2 +-
 src/components/panel/index.md.njk             |  2 +-
 src/components/phase-banner/index.md.njk      |  2 +-
 src/components/radios/index.md.njk            |  2 +-
 src/components/select/index.md.njk            |  2 +-
 src/components/skip-link/index.md.njk         |  2 +-
 src/components/tag/index.md.njk               |  2 +-
 src/components/text-input/index.md.njk        |  2 +-
 src/components/textarea/index.md.njk          |  2 +-
 src/patterns/addresses/index.md.njk           |  2 +-
 .../check-a-service-is-suitable/index.md.njk  |  2 +-
 src/patterns/check-answers/index.md.njk       |  2 +-
 .../confirm-an-email-address/index.md.njk     |  2 +-
 src/patterns/confirmation-pages/index.md.njk  |  2 +-
 src/patterns/create-a-username/index.md.njk   |  2 +-
 src/patterns/create-accounts/index.md.njk     |  2 +-
 src/patterns/dates/index.md.njk               |  2 +-
 src/patterns/email-addresses/index.md.njk     |  2 +-
 src/patterns/fill-in-a-form/index.md.njk      |  2 +-
 src/patterns/index.md.njk                     |  2 +-
 src/patterns/names/index.md.njk               |  2 +-
 .../national-insurance-numbers/index.md.njk   |  2 +-
 src/patterns/passwords/index.md.njk           |  2 +-
 src/patterns/question-pages/index.md.njk      |  2 +-
 src/styles/typography/index.md.njk            |  2 +-
 views/layouts/_generic.njk                    |  8 +++----
 views/layouts/layout-components.njk           |  9 --------
 views/layouts/layout-patterns.njk             |  9 --------
 views/layouts/layout-styles.njk               |  9 --------
 views/partials/_toc-components.njk            | 21 ------------------
 views/partials/_toc-patterns.njk              | 22 -------------------
 38 files changed, 36 insertions(+), 106 deletions(-)
 delete mode 100644 views/layouts/layout-components.njk
 delete mode 100644 views/layouts/layout-patterns.njk
 delete mode 100644 views/layouts/layout-styles.njk
 delete mode 100644 views/partials/_toc-components.njk
 delete mode 100644 views/partials/_toc-patterns.njk

diff --git a/src/components/back-link/index.md.njk b/src/components/back-link/index.md.njk
index 02d8c2529f..814e21ed21 100644
--- a/src/components/back-link/index.md.njk
+++ b/src/components/back-link/index.md.njk
@@ -3,7 +3,7 @@ title: Back link
 description: Use the Back link component to help users go back to the previous page in a multi-page transaction.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/components/breadcrumbs/index.md.njk b/src/components/breadcrumbs/index.md.njk
index 7edceb42bc..21872e76ff 100644
--- a/src/components/breadcrumbs/index.md.njk
+++ b/src/components/breadcrumbs/index.md.njk
@@ -3,7 +3,7 @@ title: Breadcrumbs
 description: Help users orientate themselves and navigate pages within a hierarchical structure.
 section: Components
 aliases: navigation path, cookie crumb
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/components/button/index.md.njk b/src/components/button/index.md.njk
index 35067d3084..fe83d0e381 100644
--- a/src/components/button/index.md.njk
+++ b/src/components/button/index.md.njk
@@ -3,7 +3,7 @@ title: Button
 description: GOV.UK Button
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/components/checkboxes/index.md.njk b/src/components/checkboxes/index.md.njk
index d3389f2d2e..43c385ffc9 100644
--- a/src/components/checkboxes/index.md.njk
+++ b/src/components/checkboxes/index.md.njk
@@ -3,7 +3,7 @@ title: Checkboxes
 description: Let users select one or more options by using the Checkboxes component.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/components/date-input/index.md.njk b/src/components/date-input/index.md.njk
index 8f93144659..f36d1a9329 100644
--- a/src/components/date-input/index.md.njk
+++ b/src/components/date-input/index.md.njk
@@ -3,7 +3,7 @@ title: Date input
 description: Use the Date input component to help users enter a memorable date.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/components/fieldset/index.md.njk b/src/components/fieldset/index.md.njk
index 2bc421ee18..c6a4cf2d4a 100644
--- a/src/components/fieldset/index.md.njk
+++ b/src/components/fieldset/index.md.njk
@@ -3,7 +3,7 @@ title: Fieldset
 description: Use the Fieldset component to group related form inputs.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/components/file-upload/index.md.njk b/src/components/file-upload/index.md.njk
index a7abfda46c..8f353404b5 100644
--- a/src/components/file-upload/index.md.njk
+++ b/src/components/file-upload/index.md.njk
@@ -3,7 +3,7 @@ title: File upload
 description: Help users select and upload a file.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/components/index.md.njk b/src/components/index.md.njk
index e4d0c25515..232195ae81 100644
--- a/src/components/index.md.njk
+++ b/src/components/index.md.njk
@@ -1,5 +1,5 @@
 ---
-layout: layout-components.njk
+layout: layout-pane.njk
 title: Components
 ---
 
diff --git a/src/components/panel/index.md.njk b/src/components/panel/index.md.njk
index 2cbb4ac67f..642e964487 100644
--- a/src/components/panel/index.md.njk
+++ b/src/components/panel/index.md.njk
@@ -3,7 +3,7 @@ title: Panel
 description: The Panel component is a visible container used on confirmation or results pages.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/components/phase-banner/index.md.njk b/src/components/phase-banner/index.md.njk
index 097f8f0174..bacd401690 100644
--- a/src/components/phase-banner/index.md.njk
+++ b/src/components/phase-banner/index.md.njk
@@ -3,7 +3,7 @@ title: Phase banner
 description: Use the Phase banner component to show users your service is still being worked on.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/components/radios/index.md.njk b/src/components/radios/index.md.njk
index d1b65e0b1e..75ab23f159 100644
--- a/src/components/radios/index.md.njk
+++ b/src/components/radios/index.md.njk
@@ -3,7 +3,7 @@ title: Radios
 description: Let users select a single option from a list using the Radios component.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/components/select/index.md.njk b/src/components/select/index.md.njk
index f1fe0f0286..9bf30f96d4 100644
--- a/src/components/select/index.md.njk
+++ b/src/components/select/index.md.njk
@@ -3,7 +3,7 @@ title: Select
 description: Help users select an item from a dropdown list.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/components/skip-link/index.md.njk b/src/components/skip-link/index.md.njk
index c8a0c3d807..42d904fb65 100644
--- a/src/components/skip-link/index.md.njk
+++ b/src/components/skip-link/index.md.njk
@@ -3,7 +3,7 @@ title: Skip link
 description: Use the Skip link component to help keyboard-only users skip to the main content on a page.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/components/tag/index.md.njk b/src/components/tag/index.md.njk
index 7e8046da33..e289b7eb71 100644
--- a/src/components/tag/index.md.njk
+++ b/src/components/tag/index.md.njk
@@ -3,7 +3,7 @@ title: Tag
 description: indicate the status of something, such as an item on a Task list or a Phase banner.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/components/text-input/index.md.njk b/src/components/text-input/index.md.njk
index 9d38e5bae2..8796cb6c50 100644
--- a/src/components/text-input/index.md.njk
+++ b/src/components/text-input/index.md.njk
@@ -3,7 +3,7 @@ title: Text input
 description: Help users enter information with the Text input component.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/components/textarea/index.md.njk b/src/components/textarea/index.md.njk
index acffdb2191..5e0a7fc7f9 100644
--- a/src/components/textarea/index.md.njk
+++ b/src/components/textarea/index.md.njk
@@ -3,7 +3,7 @@ title: Textarea
 description: Help users provide detailed information using the Textarea component.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/patterns/addresses/index.md.njk b/src/patterns/addresses/index.md.njk
index e139014031..7d3193b803 100644
--- a/src/patterns/addresses/index.md.njk
+++ b/src/patterns/addresses/index.md.njk
@@ -4,7 +4,7 @@ description: Help users provide an address.
 section: Patterns
 theme: Ask users for...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/patterns/check-a-service-is-suitable/index.md.njk b/src/patterns/check-a-service-is-suitable/index.md.njk
index a754a7981b..ccfb3435fe 100644
--- a/src/patterns/check-a-service-is-suitable/index.md.njk
+++ b/src/patterns/check-a-service-is-suitable/index.md.njk
@@ -4,7 +4,7 @@ description: Ask users questions to help them work out if they can or should use
 section: Patterns
 theme: Help users to...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 Ask users questions to help them work out if they can or should use your service.
diff --git a/src/patterns/check-answers/index.md.njk b/src/patterns/check-answers/index.md.njk
index d6bd2c9016..726c5b7a23 100644
--- a/src/patterns/check-answers/index.md.njk
+++ b/src/patterns/check-answers/index.md.njk
@@ -4,7 +4,7 @@ description: Let users check their answers before submitting information to a se
 section: Patterns
 theme: Help users to...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 Let users check their answers before submitting information to a service.
diff --git a/src/patterns/confirm-an-email-address/index.md.njk b/src/patterns/confirm-an-email-address/index.md.njk
index 42a1122bba..3939c0df36 100644
--- a/src/patterns/confirm-an-email-address/index.md.njk
+++ b/src/patterns/confirm-an-email-address/index.md.njk
@@ -4,7 +4,7 @@ description: Use an email confirmation loop to check that a user has access to a
 section: Patterns
 theme: Help users to...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 Use an email confirmation loop to check that a user has access to a specific email account.
diff --git a/src/patterns/confirmation-pages/index.md.njk b/src/patterns/confirmation-pages/index.md.njk
index 46124a0155..7d084a8a01 100644
--- a/src/patterns/confirmation-pages/index.md.njk
+++ b/src/patterns/confirmation-pages/index.md.njk
@@ -4,7 +4,7 @@ description: Let users know they’ve completed a transaction.
 section: Patterns
 theme: Pages
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/patterns/create-a-username/index.md.njk b/src/patterns/create-a-username/index.md.njk
index 6afb4bf607..b8c6ef0927 100644
--- a/src/patterns/create-a-username/index.md.njk
+++ b/src/patterns/create-a-username/index.md.njk
@@ -4,7 +4,7 @@ description: Help users to create a unique and memorable username to sign into a
 section: Patterns
 theme: Help users to...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 Help users to create a unique and memorable username to sign into a service with.
diff --git a/src/patterns/create-accounts/index.md.njk b/src/patterns/create-accounts/index.md.njk
index 2c9a84cb0e..ef288fc88c 100644
--- a/src/patterns/create-accounts/index.md.njk
+++ b/src/patterns/create-accounts/index.md.njk
@@ -4,7 +4,7 @@ description: Help users create an account for your service.
 section: Patterns
 theme: Help users to...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 Help users create an account for your service.
diff --git a/src/patterns/dates/index.md.njk b/src/patterns/dates/index.md.njk
index df9c77acdc..1ebcd289f8 100644
--- a/src/patterns/dates/index.md.njk
+++ b/src/patterns/dates/index.md.njk
@@ -4,7 +4,7 @@ description: Help users enter or select a date.
 section: Patterns
 theme: Ask users for...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/patterns/email-addresses/index.md.njk b/src/patterns/email-addresses/index.md.njk
index cc0748414c..f5dda5eb5f 100644
--- a/src/patterns/email-addresses/index.md.njk
+++ b/src/patterns/email-addresses/index.md.njk
@@ -4,7 +4,7 @@ description: Help users enter a valid email address.
 section: Patterns
 theme: Ask users for...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/patterns/fill-in-a-form/index.md.njk b/src/patterns/fill-in-a-form/index.md.njk
index d3f2b38719..386a8f8155 100644
--- a/src/patterns/fill-in-a-form/index.md.njk
+++ b/src/patterns/fill-in-a-form/index.md.njk
@@ -4,7 +4,7 @@ description: Help users complete a form by only asking for critical information,
 section: Patterns
 theme: Help users to...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/patterns/index.md.njk b/src/patterns/index.md.njk
index d72f61ec6f..8af65df5ba 100644
--- a/src/patterns/index.md.njk
+++ b/src/patterns/index.md.njk
@@ -1,5 +1,5 @@
 ---
-layout: layout-patterns.njk
+layout: layout-pane.njk
 title: Patterns
 ---
 
diff --git a/src/patterns/names/index.md.njk b/src/patterns/names/index.md.njk
index c406313de0..5b56ba5c8f 100644
--- a/src/patterns/names/index.md.njk
+++ b/src/patterns/names/index.md.njk
@@ -4,7 +4,7 @@ description: Help users correctly enter their name.
 section: Patterns
 theme: Ask users for...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/patterns/national-insurance-numbers/index.md.njk b/src/patterns/national-insurance-numbers/index.md.njk
index 6508e1c3f2..f70e6047b0 100644
--- a/src/patterns/national-insurance-numbers/index.md.njk
+++ b/src/patterns/national-insurance-numbers/index.md.njk
@@ -4,7 +4,7 @@ description: Ask users to provide their National Insurance number.
 section: Patterns
 theme: Ask users for...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/patterns/passwords/index.md.njk b/src/patterns/passwords/index.md.njk
index 6db037739b..00a786cfca 100644
--- a/src/patterns/passwords/index.md.njk
+++ b/src/patterns/passwords/index.md.njk
@@ -4,7 +4,7 @@ description: Help users to create and enter secure and memorable passwords.
 section: Patterns
 theme: Ask users for...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 Help users to create and enter secure and memorable passwords.
diff --git a/src/patterns/question-pages/index.md.njk b/src/patterns/question-pages/index.md.njk
index 84a0f8c49e..2760ae69c4 100644
--- a/src/patterns/question-pages/index.md.njk
+++ b/src/patterns/question-pages/index.md.njk
@@ -4,7 +4,7 @@ description: Follow this pattern whenever you need to ask users questions within
 section: Patterns
 theme: Pages
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/src/styles/typography/index.md.njk b/src/styles/typography/index.md.njk
index e6cf28f3b1..2f193ced12 100644
--- a/src/styles/typography/index.md.njk
+++ b/src/styles/typography/index.md.njk
@@ -2,7 +2,7 @@
 title: Typography
 description: GOV.UK Typography
 section: Styles
-layout: layout-styles.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
diff --git a/views/layouts/_generic.njk b/views/layouts/_generic.njk
index 01c80d7ae0..afc93a2bc2 100644
--- a/views/layouts/_generic.njk
+++ b/views/layouts/_generic.njk
@@ -10,18 +10,18 @@
       <script src="/javascripts/ie.js"></script>
     <![endif]-->
     <script src="/javascripts/vendor/modernizr.js"></script>
-    {% include "../partials/_tracking-head.njk" %}
+    {% include "_tracking-head.njk" %}
   </head>
   <body>
-    {% include "../partials/_tracking-body.njk" %}
+    {% include "_tracking-body.njk" %}
     <a href="#content" class="govuk-c-skip-link">Skip to main content</a>
     <div class="app-o-pane">
       <div class="app-o-pane__header">
         {% include "_header.njk" %}
       </div>
       <div class="app-o-pane__nav">
-        {% include "../partials/_navigation.njk" %}
-        {% include "../partials/_mobile-navigation.njk" %}
+        {% include "_navigation.njk" %}
+        {% include "_mobile-navigation.njk" %}
       </div>
 
       {% block body %}
diff --git a/views/layouts/layout-components.njk b/views/layouts/layout-components.njk
deleted file mode 100644
index e00b2cd22a..0000000000
--- a/views/layouts/layout-components.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-{% extends "layout-pane.njk" %}
-
-{% block toc %}
-  {% include "../partials/_toc-components.njk" %}
-{% endblock %}
-
-{% block endtoc %}
-  {% include "../partials/_toc-components.njk" %}
-{% endblock %}
diff --git a/views/layouts/layout-patterns.njk b/views/layouts/layout-patterns.njk
deleted file mode 100644
index 7e4084a231..0000000000
--- a/views/layouts/layout-patterns.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-{% extends "layout-pane.njk" %}
-
-{% block toc %}
-  {% include "../partials/_toc-patterns.njk" %}
-{% endblock %}
-
-{% block endtoc %}
-  {% include "../partials/_toc-patterns.njk" %}
-{% endblock %}
diff --git a/views/layouts/layout-styles.njk b/views/layouts/layout-styles.njk
deleted file mode 100644
index be0a5f6bec..0000000000
--- a/views/layouts/layout-styles.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-{% extends "layout-pane.njk" %}
-
-{% block toc %}
-  {% include "../partials/_toc-styles.njk" %}
-{% endblock %}
-
-{% block endtoc %}
-  {% include "../partials/_toc-styles.njk" %}
-{% endblock %}
\ No newline at end of file
diff --git a/views/partials/_toc-components.njk b/views/partials/_toc-components.njk
deleted file mode 100644
index 39f0c6b663..0000000000
--- a/views/partials/_toc-components.njk
+++ /dev/null
@@ -1,21 +0,0 @@
-<nav class="app-c-toc">
-  <ul class="app-c-toc__section">
-
-    {% for item in navigation %}
-      {% if item.url in path %}
-      {% if item.items %}
-        {% for theme, items in item.items | groupby("theme") %}
-          {% if theme != 'undefined' %}
-            <h4 class="govuk-caption-m">{{ theme }}</h4>
-          {% endif %}
-          {% for subitem in items %}
-            <li class="app-c-toc__section-item{% if subitem.url == path %} app-c-toc__section-item--current{% endif %}">
-              <a href="/{{ subitem.url }}">{{ subitem.label }}</a>
-            </li>
-          {% endfor %}
-        {% endfor %}
-      {% endif %}
-      {% endif %}
-    {% endfor %}
-  </ul>
-</nav>
diff --git a/views/partials/_toc-patterns.njk b/views/partials/_toc-patterns.njk
deleted file mode 100644
index f0e2930340..0000000000
--- a/views/partials/_toc-patterns.njk
+++ /dev/null
@@ -1,22 +0,0 @@
-<nav class="app-c-toc">
-  <ul class="app-c-toc__section">
-
-    {% for item in navigation %}
-      {% if item.url in path %}
-
-      {% set items = item.items or [] %}
-      {% for theme, items in items | groupby("theme") %}
-        {% if theme != 'undefined' %}
-          <h4 class="govuk-caption-m">{{ theme }}</h4>
-        {% endif %}
-        {% for subitem in items %}
-          <li class="app-c-toc__section-item{% if subitem.url == path %} app-c-toc__section-item--current{% endif %}">
-            <a href="/{{ subitem.url }}">{{ subitem.label }}</a>
-          </li>
-        {% endfor %}
-      {% endfor %}
-
-      {% endif %}
-    {% endfor %}
-  </ul>
-</nav>

From 897b4e4b39a8b94541f15b3eaeb488ce8f082e4c Mon Sep 17 00:00:00 2001
From: alex-ju <alex-ju@users.noreply.github.com>
Date: Thu, 4 Jan 2018 15:36:39 +0000
Subject: [PATCH 8/9] Rename toc to subnav

---
 src/stylesheets/components/_pane.scss         |  8 +++----
 .../components/{_toc.scss => _subnav.scss}    |  8 +++----
 src/stylesheets/main.scss                     |  2 +-
 views/layouts/layout-pane.njk                 | 10 ++++-----
 views/partials/_subnav.njk                    | 21 +++++++++++++++++++
 5 files changed, 34 insertions(+), 15 deletions(-)
 rename src/stylesheets/components/{_toc.scss => _subnav.scss} (85%)
 create mode 100644 views/partials/_subnav.njk

diff --git a/src/stylesheets/components/_pane.scss b/src/stylesheets/components/_pane.scss
index fbeb67c5eb..c8eab4c0cf 100644
--- a/src/stylesheets/components/_pane.scss
+++ b/src/stylesheets/components/_pane.scss
@@ -66,7 +66,7 @@
     }
   }
 
-  .app-o-pane__toc {
+  .app-o-pane__subnav {
     border-right: 1px solid $govuk-border-colour;
     @include mq($from: tablet) {
       width: $toc-width;
@@ -82,7 +82,7 @@
     }
   }
 
-  .app-o-pane__toc-mobile-overview {
+  .app-o-pane__subnav-mobile-overview {
     display: none; // No JS fallback for overview links
   }
 
@@ -111,7 +111,7 @@
 
   .no-js {
 
-    .app-o-pane__toc-mobile-overview {
+    .app-o-pane__subnav-mobile-overview {
       display: block; // No JS fallback for overview links
     }
   }
@@ -121,7 +121,7 @@
       display: block;
     }
 
-    .app-o-pane__toc {
+    .app-o-pane__subnav {
       width: $toc-width;
       float: left;
       overflow-x: hidden;
diff --git a/src/stylesheets/components/_toc.scss b/src/stylesheets/components/_subnav.scss
similarity index 85%
rename from src/stylesheets/components/_toc.scss
rename to src/stylesheets/components/_subnav.scss
index 80672816eb..cd071b900b 100644
--- a/src/stylesheets/components/_toc.scss
+++ b/src/stylesheets/components/_subnav.scss
@@ -1,11 +1,11 @@
-@include exports("toc") {
+@include exports("subnav") {
 
-  .app-c-toc {
+  .app-c-subnav {
     padding: 0 $govuk-spacing-scale-3;
     @include govuk-font-regular-16;
   }
 
-  .app-c-toc__section {
+  .app-c-subnav__section {
     margin: $govuk-spacing-scale-3 0;
     padding: 0;
     list-style-type: none;
@@ -26,7 +26,7 @@
     }
   }
 
-  .app-c-toc__section-item--current {
+  .app-c-subnav__section-item--current {
     a,
     a:link,
     a:visited {
diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
index 25e5627a2e..fc1d059e72 100644
--- a/src/stylesheets/main.scss
+++ b/src/stylesheets/main.scss
@@ -10,7 +10,7 @@ $app-light-grey: #f8f8f8;
 @import "components/divider";
 @import "components/masthead";
 @import "components/footer";
-@import "components/toc";
+@import "components/subnav";
 @import "components/pane";
 @import "components/example";
 @import "components/tabs";
diff --git a/views/layouts/layout-pane.njk b/views/layouts/layout-pane.njk
index 69e792b4cf..b97c998463 100644
--- a/views/layouts/layout-pane.njk
+++ b/views/layouts/layout-pane.njk
@@ -2,9 +2,8 @@
 
 {% block body %}
 <div class="app-o-pane__body">
-  <div class="app-o-pane__toc app-u-hide-mobile">
-    {% block toc %}
-    {% endblock %}
+  <div class="app-o-pane__subnav app-u-hide-mobile">
+    {% include "_subnav.njk" %}
   </div>
   <div class="app-o-pane__content">
     <main id="content" class="app-c-content" role="main">
@@ -27,9 +26,8 @@
 
     </main>
     {# No JS fallback to show overview #}
-    <div class="app-o-pane__toc-mobile-overview app-u-hide-desktop">
-      {% block endtoc %}
-      {% endblock %}
+    <div class="app-o-pane__subnav-mobile-overview app-u-hide-desktop">
+      {% include "_subnav.njk" %}
     </div>
     {% include "_footer.njk" %}
   </div>
diff --git a/views/partials/_subnav.njk b/views/partials/_subnav.njk
new file mode 100644
index 0000000000..bbf80462dd
--- /dev/null
+++ b/views/partials/_subnav.njk
@@ -0,0 +1,21 @@
+<nav class="app-c-subnav">
+  <ul class="app-c-subnav__section">
+
+    {% for item in navigation %}
+      {% if item.url in path %}
+      {% if item.items %}
+        {% for theme, items in item.items | groupby("theme") %}
+          {% if theme != 'undefined' %}
+            <h4 class="govuk-caption-m">{{ theme }}</h4>
+          {% endif %}
+          {% for subitem in items %}
+            <li class="app-c-subnav__section-item{% if subitem.url == path %} app-c-subnav__section-item--current{% endif %}">
+              <a href="/{{ subitem.url }}">{{ subitem.label }}</a>
+            </li>
+          {% endfor %}
+        {% endfor %}
+      {% endif %}
+      {% endif %}
+    {% endfor %}
+  </ul>
+</nav>

From fe8780fc9dc39a139fa4f547d64bff1b3134d68c Mon Sep 17 00:00:00 2001
From: alex-ju <alex-ju@users.noreply.github.com>
Date: Thu, 4 Jan 2018 16:19:39 +0000
Subject: [PATCH 9/9] Style subnav

---
 src/stylesheets/components/_mobile-navigation.scss |  2 +-
 src/stylesheets/components/_subnav.scss            | 11 +++++++++--
 views/partials/_subnav.njk                         |  7 +++----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/stylesheets/components/_mobile-navigation.scss b/src/stylesheets/components/_mobile-navigation.scss
index a307f16c83..69e539e5d2 100644
--- a/src/stylesheets/components/_mobile-navigation.scss
+++ b/src/stylesheets/components/_mobile-navigation.scss
@@ -79,7 +79,7 @@
   margin: 0;
   padding: $govuk-spacing-scale-4 $govuk-spacing-scale-4 $govuk-spacing-scale-1 $govuk-spacing-scale-4;
   color: $govuk-grey-1;
-  @include govuk-font-regular-19;
+  @include govuk-font-bold-19;
   text-transform: uppercase;
 }
 
diff --git a/src/stylesheets/components/_subnav.scss b/src/stylesheets/components/_subnav.scss
index cd071b900b..74dfc2ac22 100644
--- a/src/stylesheets/components/_subnav.scss
+++ b/src/stylesheets/components/_subnav.scss
@@ -1,12 +1,12 @@
 @include exports("subnav") {
 
   .app-c-subnav {
-    padding: 0 $govuk-spacing-scale-3;
+    padding: $govuk-spacing-scale-3;
     @include govuk-font-regular-16;
   }
 
   .app-c-subnav__section {
-    margin: $govuk-spacing-scale-3 0;
+    margin: 0 0 $govuk-spacing-scale-4;
     padding: 0;
     list-style-type: none;
 
@@ -36,4 +36,11 @@
     }
   }
 
+  .app-c-subnav__theme {
+    margin: 0;
+    padding: $govuk-spacing-scale-2 $govuk-spacing-scale-3;
+    color: $govuk-grey-1;
+    @include govuk-font-bold-16;
+    text-transform: uppercase;
+  }
 }
diff --git a/views/partials/_subnav.njk b/views/partials/_subnav.njk
index bbf80462dd..b2f03203df 100644
--- a/views/partials/_subnav.njk
+++ b/views/partials/_subnav.njk
@@ -1,21 +1,20 @@
 <nav class="app-c-subnav">
-  <ul class="app-c-subnav__section">
-
     {% for item in navigation %}
       {% if item.url in path %}
       {% if item.items %}
         {% for theme, items in item.items | groupby("theme") %}
           {% if theme != 'undefined' %}
-            <h4 class="govuk-caption-m">{{ theme }}</h4>
+            <h4 class="app-c-subnav__theme">{{ theme }}</h4>
           {% endif %}
+          <ul class="app-c-subnav__section">
           {% for subitem in items %}
             <li class="app-c-subnav__section-item{% if subitem.url == path %} app-c-subnav__section-item--current{% endif %}">
               <a href="/{{ subitem.url }}">{{ subitem.label }}</a>
             </li>
           {% endfor %}
+          </ul>
         {% endfor %}
       {% endif %}
       {% endif %}
     {% endfor %}
-  </ul>
 </nav>