defra_ruby_template 5.11.0 → 6.4.0

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json

@@ -25,9 +25,14 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
-            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n                                    \nNavigation item 2\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \nNavigation item 3\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n                                    \nNavigation item 4\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
+            "pageTemplateOptions": {},
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
+            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n                                    \nNavigation item 2\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \nNavigation item 3\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n                                    \nNavigation item 4\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
         },
         {
             "name": "with navigation with a current item",
@@ -54,38 +59,9 @@
             },
             "hidden": false,
             "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.",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
-            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"page\">\n                                    \n                  <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \nNavigation item 3\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n                                    \nNavigation item 4\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
-        },
-        {
-            "name": "with navigation with an active item",
-            "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"
-                    }
-                ]
-            },
-            "hidden": false,
-            "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).",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"true\">\n                                    \n                  <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \nNavigation item 3\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n                                    \nNavigation item 4\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
+            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"page\">\n                                    \n                  <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \nNavigation item 3\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n                                    \nNavigation item 4\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
         },
         {
             "name": "with large navigation",
@@ -159,9 +135,9 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/benefits\">\n                                    \nBenefits\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/births-deaths-marriages\">\n                                    \nBirths, deaths, marriages and care\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/business\">\n                                    \nBusiness and self-employed\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/childcare-parenting\">\n                                    \nChildcare and parenting\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/citizenship\">\n                                    \nCitizenship and living in the UK\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/justice\">\n                                    \nCrime, justice and the law\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/disabilities\">\n                                    \nDisabled people\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/driving\">\n                                    \nDriving and transport\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/education\">\n                                    \nEducation and learning\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/employing-people\">\n                                    \nEmploying people\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/environment-countryside\">\n                                    \nEnvironment and countryside\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/housing-local-services\">\n                                    \nHousing and local services\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/tax\">\n                                    \nMoney and tax\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/abroad\">\n                                    \nPassports, travel and living abroad\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/visas-immigration\">\n                                    \nVisas and immigration\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/working\">\n                                    \nWorking, jobs and pensions\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
+            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/benefits\">\n                                    \nBenefits\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/births-deaths-marriages\">\n                                    \nBirths, deaths, marriages and care\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/business\">\n                                    \nBusiness and self-employed\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/childcare-parenting\">\n                                    \nChildcare and parenting\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/citizenship\">\n                                    \nCitizenship and living in the UK\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/justice\">\n                                    \nCrime, justice and the law\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/disabilities\">\n                                    \nDisabled people\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/driving\">\n                                    \nDriving and transport\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/education\">\n                                    \nEducation and learning\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/employing-people\">\n                                    \nEmploying people\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/environment-countryside\">\n                                    \nEnvironment and countryside\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/housing-local-services\">\n                                    \nHousing and local services\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/tax\">\n                                    \nMoney and tax\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/abroad\">\n                                    \nPassports, travel and living abroad\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/visas-immigration\">\n                                    \nVisas and immigration\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/browse/working\">\n                                    \nWorking, jobs and pensions\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
         },
         {
             "name": "with HTML navigation items",
@@ -183,9 +159,9 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \n<em>Navigation item 1</em>\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n                                    \n<em>Navigation item 2</em>\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \n<em>Navigation item 3</em>\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
+            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \n<em>Navigation item 1</em>\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n                                    \n<em>Navigation item 2</em>\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \n<em>Navigation item 3</em>\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
         },
         {
             "name": "with non-link navigation items",
@@ -204,9 +180,9 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <span class=\"govuk-service-navigation__text\">\n                                    \nNavigation item 1\n                  </span>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <span class=\"govuk-service-navigation__text\">\n                                    \n<em>Navigation item 2</em>\n                  </span>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <span class=\"govuk-service-navigation__text\">\n                                    \nNavigation item 3\n                  </span>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
+            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <span class=\"govuk-service-navigation__text\">\n                                    \nNavigation item 1\n                  </span>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <span class=\"govuk-service-navigation__text\">\n                                    \n<em>Navigation item 2</em>\n                  </span>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <span class=\"govuk-service-navigation__text\">\n                                    \nNavigation item 3\n                  </span>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
         },
         {
             "name": "with service name",
@@ -215,7 +191,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n        <span class=\"govuk-service-navigation__service-name\">\n            <span class=\"govuk-service-navigation__text\">Service name</span>\n        </span>\n\n      \n    </div>\n\n    </div>\n\n  </section>"
         },
@@ -227,7 +203,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n        <span class=\"govuk-service-navigation__service-name\">\n            <a href=\"#/\" class=\"govuk-service-navigation__link\">\n              Service name\n            </a>\n        </span>\n\n      \n    </div>\n\n    </div>\n\n  </section>"
         },
@@ -239,7 +215,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n        <span class=\"govuk-service-navigation__service-name\">\n            <a href=\"#/\" class=\"govuk-service-navigation__link\">\n              Apply to receive a rare holofoil Charizard Pokémon card from the King\n            </a>\n        </span>\n\n      \n    </div>\n\n    </div>\n\n  </section>"
         },
@@ -270,16 +246,124 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
+            "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n        <span class=\"govuk-service-navigation__service-name\">\n            <a href=\"#/\" class=\"govuk-service-navigation__link\">\n              Apply for a juggling license\n            </a>\n        </span>\n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"true\">\n                                    \n                  <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \nNavigation item 3\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n                                    \nNavigation item 4\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </section>"
+        },
+        {
+            "name": "inverse",
+            "options": {
+                "classes": "govuk-service-navigation--inverse",
+                "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": false,
+            "description": "Service navigation that appears sandwiched between other areas of brand blue, such as the GOV.UK header and a custom page masthead.",
+            "pageTemplateOptions": {
+                "bodyClasses": "app-template__body--inverse"
+            },
+            "screenshot": false,
+            "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation govuk-service-navigation--inverse\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n        <span class=\"govuk-service-navigation__service-name\">\n            <a href=\"#/\" class=\"govuk-service-navigation__link\">\n              Apply for a juggling license\n            </a>\n        </span>\n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"true\">\n                                    \n                  <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \nNavigation item 3\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n                                    \nNavigation item 4\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </section>"
+        },
+        {
+            "name": "with collapseNavigationOnMobile set to false",
+            "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"
+                    }
+                ],
+                "collapseNavigationOnMobile": false
+            },
+            "hidden": false,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n        <span class=\"govuk-service-navigation__service-name\">\n            <a href=\"#/\" class=\"govuk-service-navigation__link\">\n              Apply for a juggling license\n            </a>\n        </span>\n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"true\">\n                                    \n                  <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \nNavigation item 3\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n                                    \nNavigation item 4\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </section>"
+        },
+        {
+            "name": "with a single navigation item",
+            "options": {
+                "serviceName": "Apply for a juggling license",
+                "serviceUrl": "#/",
+                "navigation": [
+                    {
+                        "href": "#/1",
+                        "text": "Log out"
+                    }
+                ]
+            },
+            "hidden": false,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n        <span class=\"govuk-service-navigation__service-name\">\n            <a href=\"#/\" class=\"govuk-service-navigation__link\">\n              Apply for a juggling license\n            </a>\n        </span>\n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nLog out\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </section>"
+        },
+        {
+            "name": "with a single navigation item and collapseNavigationOnMobile set to true",
+            "options": {
+                "serviceName": "Apply for a juggling license",
+                "serviceUrl": "#/",
+                "navigation": [
+                    {
+                        "href": "#/1",
+                        "text": "Log out"
+                    }
+                ],
+                "collapseNavigationOnMobile": true
+            },
+            "hidden": false,
+            "description": "",
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n        <span class=\"govuk-service-navigation__service-name\">\n            <a href=\"#/\" class=\"govuk-service-navigation__link\">\n              Apply for a juggling license\n            </a>\n        </span>\n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"true\">\n                                    \n                  <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \nNavigation item 3\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n                                    \nNavigation item 4\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </section>"
+            "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n        <span class=\"govuk-service-navigation__service-name\">\n            <a href=\"#/\" class=\"govuk-service-navigation__link\">\n              Apply for a juggling license\n            </a>\n        </span>\n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nLog out\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </section>"
         },
         {
             "name": "with no options set",
             "options": {},
             "hidden": true,
             "description": "If no serviceName or navigation is set, don't render anything.",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n    </div>\n\n    </div>\n\n  </div>"
         },
@@ -294,7 +378,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\" data-foo=\"bar\" data-pika=\"chu\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n        <span class=\"govuk-service-navigation__service-name\">\n            <span class=\"govuk-service-navigation__text\">Service name</span>\n        </span>\n\n      \n    </div>\n\n    </div>\n\n  </section>"
         },
@@ -306,7 +390,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation app-my-curious-custom-class\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n        <span class=\"govuk-service-navigation__service-name\">\n            <span class=\"govuk-service-navigation__text\">Service name</span>\n        </span>\n\n      \n    </div>\n\n    </div>\n\n  </section>"
         },
@@ -318,7 +402,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<section aria-label=\"Service name and nav\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n        <span class=\"govuk-service-navigation__service-name\">\n            <span class=\"govuk-service-navigation__text\">Service name</span>\n        </span>\n\n      \n    </div>\n\n    </div>\n\n  </section>"
         },
@@ -330,14 +414,18 @@
                     {
                         "href": "#/1",
                         "text": "Navigation item 1"
+                    },
+                    {
+                        "href": "#/2",
+                        "text": "Navigation item 2"
                     }
                 ]
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Enter the NavZone\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Enter the NavZone\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
+            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Enter the NavZone\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Enter the NavZone\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n                                    \nNavigation item 2\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
         },
         {
             "name": "with custom navigation toggle label",
@@ -347,14 +435,18 @@
                     {
                         "href": "#/1",
                         "text": "Navigation item 1"
+                    },
+                    {
+                        "href": "#/2",
+                        "text": "Navigation item 2"
                     }
                 ]
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" aria-label=\"Enter the NavZone\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
+            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" aria-label=\"Enter the NavZone\" hidden aria-hidden=\"true\">\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n                                    \nNavigation item 2\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
         },
         {
             "name": "with identical navigation toggle text and label",
@@ -365,14 +457,18 @@
                     {
                         "href": "#/1",
                         "text": "Navigation item 1"
+                    },
+                    {
+                        "href": "#/2",
+                        "text": "Navigation item 2"
                     }
                 ]
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Enter the NavZone\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Enter the NavZone\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
+            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Enter the NavZone\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Enter the NavZone\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n                                    \nNavigation item 2\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
         },
         {
             "name": "with custom navigation label",
@@ -382,14 +478,18 @@
                     {
                         "href": "#/1",
                         "text": "Navigation item 1"
+                    },
+                    {
+                        "href": "#/2",
+                        "text": "Navigation item 2"
                     }
                 ]
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Main navigation\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
+            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Main navigation\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n                                    \nNavigation item 2\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
         },
         {
             "name": "with custom navigation toggle text and navigation label",
@@ -400,14 +500,18 @@
                     {
                         "href": "#/1",
                         "text": "Navigation item 1"
+                    },
+                    {
+                        "href": "#/2",
+                        "text": "Navigation item 2"
                     }
                 ]
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"The NavZone\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Enter the NavZone\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
+            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"The NavZone\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Enter the NavZone\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n                                    \nNavigation item 2\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
         },
         {
             "name": "with custom navigation classes",
@@ -417,14 +521,18 @@
                     {
                         "href": "#/1",
                         "text": "Navigation item 1"
+                    },
+                    {
+                        "href": "#/2",
+                        "text": "Navigation item 2"
                     }
                 ]
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper app-my-neat-navigation-class\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
+            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper app-my-neat-navigation-class\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n                                    \nNavigation item 2\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
         },
         {
             "name": "with custom navigation ID",
@@ -434,14 +542,18 @@
                     {
                         "href": "#/1",
                         "text": "Navigation item 1"
+                    },
+                    {
+                        "href": "#/2",
+                        "text": "Navigation item 2"
                     }
                 ]
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"main-nav\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"main-nav\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
+            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"main-nav\" hidden aria-hidden=\"true\">\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"main-nav\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n                                    \nNavigation item 2\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
         },
         {
             "name": "with navigation having empty values",
@@ -463,9 +575,9 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n                                    \nNavigation item 2\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
+            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n                                    \nNavigation item 2\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
         },
         {
             "name": "with navigation having only empty values",
@@ -479,7 +591,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n    </div>\n\n    </div>\n\n  </div>"
         },
@@ -490,10 +602,39 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n    </div>\n\n    </div>\n\n  </div>"
         },
+        {
+            "name": "with navigation with an active item",
+            "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"
+                    }
+                ]
+            },
+            "hidden": true,
+            "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).",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden aria-hidden=\"true\">\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"true\">\n                                    \n                  <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \nNavigation item 3\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n                                    \nNavigation item 4\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
+        },
         {
             "name": "with slotted content",
             "options": {
@@ -506,9 +647,9 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div>[start]</div><div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            <li>[navigation start]</li>\n            <li>[navigation end]</li></ul>\n        </nav>\n    </div>\n\n    <div>[end]</div></div>\n\n  </section>"
+            "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div>[start]</div><div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            <li>[navigation start]</li>\n            <li>[navigation end]</li></ul>\n        </nav>\n    </div>\n\n    <div>[end]</div></div>\n\n  </section>"
         }
     ],
     "previewLayout": "full-width"