Add language switcher component#7164
Open
domoscargin wants to merge 6 commits into
Open
Conversation
Stylesheets changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index db7d8ec3c..f44a0602b 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -3704,6 +3704,107 @@ screen and (forced-colors:active) {
margin-bottom: 0
}
+.govuk-language-switcher {
+ font-family: GDS Transport, arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-weight: 400;
+ font-size: 1.1875rem;
+ line-height: 1.3157894737;
+ margin-top: 15px;
+ margin-bottom: 15px;
+ color: var(--govuk-text-colour, #0b0c0c)
+}
+
+@media print {
+ .govuk-language-switcher {
+ font-family: sans-serif;
+ font-size: 14pt;
+ line-height: 1.15
+ }
+}
+
+.govuk-language-switcher__list {
+ display: inline-flex;
+ flex-wrap: wrap;
+ row-gap: 5px;
+ margin: 0;
+ padding: 0;
+ list-style-type: none
+}
+
+.govuk-language-switcher__list-item {
+ display: flex;
+ align-items: center
+}
+
+.govuk-language-switcher__list-item:not(:last-child):after {
+ content: "";
+ display: block;
+ height: 1em;
+ margin-right: 10px;
+ margin-left: 10px;
+ border-right: 1px solid;
+ border-right-color: var(--govuk-secondary-text-colour, #484949)
+}
+
+.govuk-language-switcher__link {
+ font-family: GDS Transport, arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-decoration: underline;
+ text-decoration-thickness: max(1px, .0625rem);
+ text-underline-offset: .1578em
+}
+
+@media print {
+ .govuk-language-switcher__link {
+ font-family: sans-serif
+ }
+}
+
+.govuk-language-switcher__link:hover {
+ text-decoration-thickness: max(3px, .1875rem, .12em);
+ -webkit-text-decoration-skip-ink: none;
+ text-decoration-skip-ink: none;
+ -webkit-text-decoration-skip: none;
+ text-decoration-skip: none
+}
+
+.govuk-language-switcher__link:focus {
+ outline: 3px solid transparent;
+ background-color: var(--govuk-focus-colour, #fd0);
+ box-shadow: 0 -2px var(--govuk-focus-colour, #fd0), 0 4px var(--govuk-focus-text-colour, #0b0c0c);
+ text-decoration: none
+}
+
+@supports not (text-wrap:balance) {
+ .govuk-language-switcher__link:focus {
+ -webkit-box-decoration-break: clone;
+ box-decoration-break: clone
+ }
+}
+
+.govuk-language-switcher__link:link {
+ color: var(--govuk-link-colour, #1a65a6)
+}
+
+.govuk-language-switcher__link:visited {
+ color: var(--govuk-link-visited-colour, #54319f)
+}
+
+.govuk-language-switcher__link:hover {
+ color: var(--govuk-link-hover-colour, #0f385c)
+}
+
+.govuk-language-switcher__link:active {
+ color: var(--govuk-link-active-colour, #0b0c0c)
+}
+
+.govuk-language-switcher__link:focus {
+ color: var(--govuk-focus-text-colour, #0b0c0c)
+}
+
.govuk-notification-banner {
font-family: GDS Transport, arial, sans-serif;
-webkit-font-smoothing: antialiased;
@@ -4666,7 +4767,8 @@ screen and (forced-colors:active) {
@media (min-width:40.0625em) {
.govuk-service-navigation__container {
flex-direction: row;
- flex-wrap: wrap
+ flex-wrap: wrap;
+ align-items: center
}
}
@@ -4800,6 +4902,22 @@ screen and (forced-colors:active) {
flex-grow: 1
}
+@media (min-width:40.0625em) {
+ .govuk-service-navigation__wrapper:has(+.govuk-service-navigation__end) {
+ margin-right: 20px
+ }
+}
+
+.govuk-service-navigation__end {
+ width: 100%
+}
+
+@media (min-width:40.0625em) {
+ .govuk-service-navigation__end {
+ width: auto
+ }
+}
+
.govuk-service-navigation__toggle {
font-family: GDS Transport, arial, sans-serif;
-webkit-font-smoothing: antialiased;
Action run for 8fdff42 |
Rendered HTML changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/template-default.html b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-default.html
new file mode 100644
index 000000000..6f5473653
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-default.html
@@ -0,0 +1,11 @@
+
+<nav class="govuk-language-switcher" aria-label="Language switcher">
+ <ul class="govuk-language-switcher__list">
+ <li class="govuk-language-switcher__list-item">
+ <span class="govuk-language-switcher__text" lang="en" aria-current="true">English</span>
+ </li>
+ <li class="govuk-language-switcher__list-item">
+ <a class="govuk-language-switcher__link" href="#/cy" lang="cy" hreflang="cy" rel="alternate">Cymraeg</a>
+ </li>
+ </ul>
+</nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-mixed-text-directions.html b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-mixed-text-directions.html
new file mode 100644
index 000000000..f1cea1c41
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-mixed-text-directions.html
@@ -0,0 +1,11 @@
+
+<nav class="govuk-language-switcher" aria-label="Language switcher">
+ <ul class="govuk-language-switcher__list">
+ <li class="govuk-language-switcher__list-item">
+ <span class="govuk-language-switcher__text" lang="en" dir="ltr" aria-current="true">English</span>
+ </li>
+ <li class="govuk-language-switcher__list-item">
+ <a class="govuk-language-switcher__link" href="#/ar" lang="ar" hreflang="ar" dir="rtl" rel="alternate">العربية</a>
+ </li>
+ </ul>
+</nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-multiple-languages.html b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-multiple-languages.html
new file mode 100644
index 000000000..c6c63a699
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-multiple-languages.html
@@ -0,0 +1,23 @@
+
+<nav class="govuk-language-switcher" aria-label="Language switcher">
+ <ul class="govuk-language-switcher__list">
+ <li class="govuk-language-switcher__list-item">
+ <span class="govuk-language-switcher__text" lang="en" aria-current="true">English</span>
+ </li>
+ <li class="govuk-language-switcher__list-item">
+ <a class="govuk-language-switcher__link" href="#/fr" lang="fr" hreflang="fr" rel="alternate">Français</a>
+ </li>
+ <li class="govuk-language-switcher__list-item">
+ <a class="govuk-language-switcher__link" href="#/hi" lang="hi" hreflang="hi" rel="alternate">हिंदी</a>
+ </li>
+ <li class="govuk-language-switcher__list-item">
+ <a class="govuk-language-switcher__link" href="#/ja" lang="ja" hreflang="ja" rel="alternate">日本語</a>
+ </li>
+ <li class="govuk-language-switcher__list-item">
+ <a class="govuk-language-switcher__link" href="#/ur" lang="ur" hreflang="ur" rel="alternate">اردو</a>
+ </li>
+ <li class="govuk-language-switcher__list-item">
+ <a class="govuk-language-switcher__link" href="#/zh" lang="zh" hreflang="zh" rel="alternate">中文</a>
+ </li>
+ </ul>
+</nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-translated-navigation-label.html b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-translated-navigation-label.html
new file mode 100644
index 000000000..b6025a0d7
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/template-with-translated-navigation-label.html
@@ -0,0 +1,11 @@
+
+<nav class="govuk-language-switcher" lang="cy" aria-label="Dewis iaith">
+ <ul class="govuk-language-switcher__list">
+ <li class="govuk-language-switcher__list-item">
+ <a class="govuk-language-switcher__link" href="#/en" lang="en" hreflang="en" rel="alternate">English</a>
+ </li>
+ <li class="govuk-language-switcher__list-item">
+ <span class="govuk-language-switcher__text" lang="cy" aria-current="true">Cymraeg</span>
+ </li>
+ </ul>
+</nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-default.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-default.html
index 2d1f277ba..d6f9aa8d7 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-default.html
@@ -50,6 +50,8 @@ Navigation item 4
</ul>
</nav>
+
+
</div>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-inverse.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-inverse.html
index e95f79fcf..627ead7c9 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-inverse.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-inverse.html
@@ -56,6 +56,8 @@ Navigation item 4
</ul>
</nav>
+
+
</div>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-a-single-navigation-item-and-collapsenavigationonmobile-set-to-true.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-a-single-navigation-item-and-collapsenavigationonmobile-set-to-true.html
index 3c348378b..7ccd94768 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-a-single-navigation-item-and-collapsenavigationonmobile-set-to-true.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-a-single-navigation-item-and-collapsenavigationonmobile-set-to-true.html
@@ -31,6 +31,8 @@ Log out
</ul>
</nav>
+
+
</div>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-a-single-navigation-item.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-a-single-navigation-item.html
index 67244744e..b501c3bd2 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-a-single-navigation-item.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-a-single-navigation-item.html
@@ -28,6 +28,8 @@ Log out
</ul>
</nav>
+
+
</div>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-collapsenavigationonmobile-set-to-false.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-collapsenavigationonmobile-set-to-false.html
index e07e0d62b..c5752ffb1 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-collapsenavigationonmobile-set-to-false.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-collapsenavigationonmobile-set-to-false.html
@@ -53,6 +53,8 @@ Navigation item 4
</ul>
</nav>
+
+
</div>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-html-navigation-items.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-html-navigation-items.html
index c1a9a0d94..1cc6c25db 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-html-navigation-items.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-html-navigation-items.html
@@ -42,6 +42,8 @@ data-module="govuk-service-navigation"
</ul>
</nav>
+
+
</div>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-language-switcher.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-language-switcher.html
new file mode 100644
index 000000000..2d78a13f3
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-language-switcher.html
@@ -0,0 +1,64 @@
+
+ <section aria-label="Service information" class="govuk-service-navigation"
+data-module="govuk-service-navigation"
+>
+ <div class="govuk-width-container">
+
+ <div class="govuk-service-navigation__container">
+
+ <span class="govuk-service-navigation__service-name">
+ <span class="govuk-service-navigation__text">Service name</span>
+ </span>
+
+
+ <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+ <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden aria-hidden="true">
+ Menu
+ </button>
+
+ <ul class="govuk-service-navigation__list" id="navigation" >
+
+
+
+ <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
+ <a class="govuk-service-navigation__link" href="#/1" aria-current="true">
+
+ <strong class="govuk-service-navigation__active-fallback">Navigation item 1</strong>
+
+ </a>
+ </li>
+
+
+ <li class="govuk-service-navigation__item">
+ <a class="govuk-service-navigation__link" href="#/2">
+
+Navigation item 2
+ </a>
+ </li>
+
+
+ <li class="govuk-service-navigation__item">
+ <a class="govuk-service-navigation__link" href="#/3">
+
+Navigation item 3
+ </a>
+ </li>
+
+ </ul>
+ </nav>
+
+
+ </div>
+
+ <nav class="govuk-language-switcher" aria-label="Language switcher">
+ <ul class="govuk-language-switcher__list">
+ <li class="govuk-language-switcher__list-item">
+ <span class="govuk-language-switcher__text" lang="en" aria-current="true">English</span>
+ </li>
+ <li class="govuk-language-switcher__list-item">
+ <a class="govuk-language-switcher__link" href="#/cy" lang="cy" hreflang="cy" rel="alternate">Cymraeg</a>
+ </li>
+ </ul>
+</nav></div>
+
+ </section>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-large-navigation.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-large-navigation.html
index a7789887d..aabfdcd9b 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-large-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-large-navigation.html
@@ -146,6 +146,8 @@ Working, jobs and pensions
</ul>
</nav>
+
+
</div>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-long-service-name.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-long-service-name.html
index 3fb470853..3f0059894 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-long-service-name.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-long-service-name.html
@@ -13,6 +13,8 @@ data-module="govuk-service-navigation"
</span>
+
+
</div>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-navigation-with-a-current-item.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-navigation-with-a-current-item.html
index e31076db0..f2df8157b 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-navigation-with-a-current-item.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-navigation-with-a-current-item.html
@@ -51,6 +51,8 @@ Navigation item 4
</ul>
</nav>
+
+
</div>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-non-link-navigation-items.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-non-link-navigation-items.html
index 7c9e050e5..109553651 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-non-link-navigation-items.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-non-link-navigation-items.html
@@ -42,6 +42,8 @@ Navigation item 3
</ul>
</nav>
+
+
</div>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-right-aligned-end-slot.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-right-aligned-end-slot.html
new file mode 100644
index 000000000..64fa9e2ba
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-right-aligned-end-slot.html
@@ -0,0 +1,38 @@
+
+ <section aria-label="Service information" class="govuk-service-navigation"
+data-module="govuk-service-navigation"
+>
+ <div class="govuk-width-container">
+
+ <div class="govuk-service-navigation__container">
+
+ <span class="govuk-service-navigation__service-name">
+ <span class="govuk-service-navigation__text">Service name</span>
+ </span>
+
+
+ <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+
+ <ul class="govuk-service-navigation__list" id="navigation" >
+
+
+
+ <li class="govuk-service-navigation__item">
+ <a class="govuk-service-navigation__link" href="#/1">
+
+Navigation item 1
+ </a>
+ </li>
+
+ </ul>
+ </nav>
+
+
+ <div class="govuk-service-navigation__end">
+ <div>[end]</div>
+ </div>
+ </div>
+
+ </div>
+
+ </section>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-right-aligned-language-switcher.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-right-aligned-language-switcher.html
new file mode 100644
index 000000000..b6c65d2d4
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-right-aligned-language-switcher.html
@@ -0,0 +1,67 @@
+
+ <section aria-label="Service information" class="govuk-service-navigation"
+data-module="govuk-service-navigation"
+>
+ <div class="govuk-width-container">
+
+ <div class="govuk-service-navigation__container">
+
+ <span class="govuk-service-navigation__service-name">
+ <span class="govuk-service-navigation__text">Service name</span>
+ </span>
+
+
+ <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+ <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden aria-hidden="true">
+ Menu
+ </button>
+
+ <ul class="govuk-service-navigation__list" id="navigation" >
+
+
+
+ <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
+ <a class="govuk-service-navigation__link" href="#/1" aria-current="true">
+
+ <strong class="govuk-service-navigation__active-fallback">Navigation item 1</strong>
+
+ </a>
+ </li>
+
+
+ <li class="govuk-service-navigation__item">
+ <a class="govuk-service-navigation__link" href="#/2">
+
+Navigation item 2
+ </a>
+ </li>
+
+
+ <li class="govuk-service-navigation__item">
+ <a class="govuk-service-navigation__link" href="#/3">
+
+Navigation item 3
+ </a>
+ </li>
+
+ </ul>
+ </nav>
+
+
+ <div class="govuk-service-navigation__end">
+ <nav class="govuk-language-switcher" aria-label="Language switcher">
+ <ul class="govuk-language-switcher__list">
+ <li class="govuk-language-switcher__list-item">
+ <span class="govuk-language-switcher__text" lang="en" aria-current="true">English</span>
+ </li>
+ <li class="govuk-language-switcher__list-item">
+ <a class="govuk-language-switcher__link" href="#/cy" lang="cy" hreflang="cy" rel="alternate">Cymraeg</a>
+ </li>
+ </ul>
+</nav>
+ </div>
+ </div>
+
+ </div>
+
+ </section>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-link.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-link.html
index a722c3f06..528d9db9b 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-link.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-link.html
@@ -13,6 +13,8 @@ data-module="govuk-service-navigation"
</span>
+
+
</div>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-name-and-navigation.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-name-and-navigation.html
index 7e8c3172c..9357ce1de 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-name-and-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-name-and-navigation.html
@@ -56,6 +56,8 @@ Navigation item 4
</ul>
</nav>
+
+
</div>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-name.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-name.html
index b0bdcf282..163a3d9de 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-name.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-with-service-name.html
@@ -11,6 +11,8 @@ data-module="govuk-service-navigation"
</span>
+
+
</div>
</div>
Action run for 8fdff42 |
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/_index.import.scss b/packages/govuk-frontend/dist/govuk/components/_index.import.scss
index 14d30c106..c2bc7e6a8 100644
--- a/packages/govuk-frontend/dist/govuk/components/_index.import.scss
+++ b/packages/govuk-frontend/dist/govuk/components/_index.import.scss
@@ -18,6 +18,7 @@
@import "input";
@import "inset-text";
@import "label";
+@import "language-switcher";
@import "notification-banner";
@import "pagination";
@import "panel";
diff --git a/packages/govuk-frontend/dist/govuk/components/_index.scss b/packages/govuk-frontend/dist/govuk/components/_index.scss
index 06170b408..0bc04b7d5 100644
--- a/packages/govuk-frontend/dist/govuk/components/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/_index.scss
@@ -18,6 +18,7 @@
@use "input";
@use "inset-text";
@use "label";
+@use "language-switcher";
@use "notification-banner";
@use "pagination";
@use "panel";
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/README.md b/packages/govuk-frontend/dist/govuk/components/language-switcher/README.md
new file mode 100644
index 000000000..63824353c
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/README.md
@@ -0,0 +1,15 @@
+# Language switcher
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the language switcher component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/language-switcher).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/language-switcher/#options-language-switcher-example) for details.
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/_index.import.scss b/packages/govuk-frontend/dist/govuk/components/language-switcher/_index.import.scss
new file mode 100644
index 000000000..6b34283aa
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/_index.import.scss
@@ -0,0 +1,8 @@
+@use "mixin";
+
+@import "../../base";
+
+@include govuk-exports("govuk/component/language-switcher") {
+ @include mixin.styles;
+}
+
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/_index.scss b/packages/govuk-frontend/dist/govuk/components/language-switcher/_index.scss
new file mode 100644
index 000000000..553c14774
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/_index.scss
@@ -0,0 +1,6 @@
+@use "../../custom-properties";
+
+@use "mixin";
+
+@include mixin.styles;
+
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/_language-switcher.import.scss b/packages/govuk-frontend/dist/govuk/components/language-switcher/_language-switcher.import.scss
new file mode 100644
index 000000000..ca01df8b6
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/_language-switcher.import.scss
@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("language-switcher");
+
+@import "index";
+
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/_mixin.scss b/packages/govuk-frontend/dist/govuk/components/language-switcher/_mixin.scss
new file mode 100644
index 000000000..539bfbe20
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/_mixin.scss
@@ -0,0 +1,44 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+ .govuk-language-switcher {
+ @include base.govuk-font($size: 19);
+
+ margin-top: base.govuk-spacing(3);
+ margin-bottom: base.govuk-spacing(3);
+ color: base.govuk-functional-colour(text);
+ }
+
+ .govuk-language-switcher__list {
+ display: inline-flex;
+ flex-wrap: wrap;
+ row-gap: base.govuk-spacing(1);
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ }
+
+ .govuk-language-switcher__list-item {
+ display: flex;
+ align-items: center;
+
+ &:not(:last-child) {
+ &::after {
+ content: "";
+ display: block;
+ height: 1em;
+ margin-right: base.govuk-spacing(2);
+ margin-left: base.govuk-spacing(2);
+ border-right: 1px solid;
+ border-right-color: base.govuk-functional-colour(secondary-text);
+ }
+ }
+ }
+
+ .govuk-language-switcher__link {
+ @include base.govuk-link-common;
+ @include base.govuk-link-style-default;
+ }
+}
+
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/fixtures.json b/packages/govuk-frontend/dist/govuk/components/language-switcher/fixtures.json
new file mode 100644
index 000000000..89cade6e6
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/fixtures.json
@@ -0,0 +1,215 @@
+{
+ "component": "language-switcher",
+ "fixtures": [
+ {
+ "name": "default",
+ "options": {
+ "items": [
+ {
+ "text": "English",
+ "lang": "en",
+ "current": true
+ },
+ {
+ "text": "Cymraeg",
+ "lang": "cy",
+ "href": "#/cy"
+ }
+ ]
+ },
+ "hidden": false,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": true,
+ "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n <ul class=\"govuk-language-switcher__list\">\n <li class=\"govuk-language-switcher__list-item\">\n <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/cy\" lang=\"cy\" hreflang=\"cy\" rel=\"alternate\">Cymraeg</a>\n </li>\n </ul>\n</nav>"
+ },
+ {
+ "name": "with multiple languages",
+ "options": {
+ "items": [
+ {
+ "text": "English",
+ "lang": "en",
+ "current": true
+ },
+ {
+ "text": "Français",
+ "lang": "fr",
+ "href": "#/fr"
+ },
+ {
+ "text": "हिंदी",
+ "lang": "hi",
+ "href": "#/hi"
+ },
+ {
+ "text": "日本語",
+ "lang": "ja",
+ "href": "#/ja"
+ },
+ {
+ "text": "اردو",
+ "lang": "ur",
+ "href": "#/ur"
+ },
+ {
+ "text": "中文",
+ "lang": "zh",
+ "href": "#/zh"
+ }
+ ]
+ },
+ "hidden": false,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n <ul class=\"govuk-language-switcher__list\">\n <li class=\"govuk-language-switcher__list-item\">\n <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/fr\" lang=\"fr\" hreflang=\"fr\" rel=\"alternate\">Français</a>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/hi\" lang=\"hi\" hreflang=\"hi\" rel=\"alternate\">हिंदी</a>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/ja\" lang=\"ja\" hreflang=\"ja\" rel=\"alternate\">日本語</a>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/ur\" lang=\"ur\" hreflang=\"ur\" rel=\"alternate\">اردو</a>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/zh\" lang=\"zh\" hreflang=\"zh\" rel=\"alternate\">中文</a>\n </li>\n </ul>\n</nav>"
+ },
+ {
+ "name": "with translated navigation label",
+ "options": {
+ "ariaLabel": "Dewis iaith",
+ "attributes": {
+ "lang": "cy"
+ },
+ "items": [
+ {
+ "text": "English",
+ "lang": "en",
+ "href": "#/en"
+ },
+ {
+ "text": "Cymraeg",
+ "lang": "cy",
+ "current": true
+ }
+ ]
+ },
+ "hidden": false,
+ "description": "When the current page is not in English, translate the `ariaLabel` into the language of the current page.",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<nav class=\"govuk-language-switcher\" lang=\"cy\" aria-label=\"Dewis iaith\">\n <ul class=\"govuk-language-switcher__list\">\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/en\" lang=\"en\" hreflang=\"en\" rel=\"alternate\">English</a>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <span class=\"govuk-language-switcher__text\" lang=\"cy\" aria-current=\"true\">Cymraeg</span>\n </li>\n </ul>\n</nav>"
+ },
+ {
+ "name": "with mixed text directions",
+ "options": {
+ "items": [
+ {
+ "text": "English",
+ "lang": "en",
+ "dir": "ltr",
+ "current": true
+ },
+ {
+ "text": "العربية",
+ "lang": "ar",
+ "dir": "rtl",
+ "href": "#/ar"
+ }
+ ]
+ },
+ "hidden": false,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n <ul class=\"govuk-language-switcher__list\">\n <li class=\"govuk-language-switcher__list-item\">\n <span class=\"govuk-language-switcher__text\" lang=\"en\" dir=\"ltr\" aria-current=\"true\">English</span>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/ar\" lang=\"ar\" hreflang=\"ar\" dir=\"rtl\" rel=\"alternate\">العربية</a>\n </li>\n </ul>\n</nav>"
+ },
+ {
+ "name": "classes",
+ "options": {
+ "classes": "app-language-switcher--custom-modifier",
+ "items": [
+ {
+ "text": "English",
+ "lang": "en",
+ "current": true
+ },
+ {
+ "text": "Cymraeg",
+ "lang": "cy",
+ "href": "#/cy"
+ }
+ ]
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<nav class=\"govuk-language-switcher app-language-switcher--custom-modifier\" aria-label=\"Language switcher\">\n <ul class=\"govuk-language-switcher__list\">\n <li class=\"govuk-language-switcher__list-item\">\n <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/cy\" lang=\"cy\" hreflang=\"cy\" rel=\"alternate\">Cymraeg</a>\n </li>\n </ul>\n</nav>"
+ },
+ {
+ "name": "attributes",
+ "options": {
+ "attributes": {
+ "id": "my-language-switcher",
+ "data-foo": "bar"
+ },
+ "items": [
+ {
+ "text": "English",
+ "lang": "en",
+ "current": true
+ },
+ {
+ "text": "Cymraeg",
+ "lang": "cy",
+ "href": "#/cy"
+ }
+ ]
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<nav class=\"govuk-language-switcher\" id=\"my-language-switcher\" data-foo=\"bar\" aria-label=\"Language switcher\">\n <ul class=\"govuk-language-switcher__list\">\n <li class=\"govuk-language-switcher__list-item\">\n <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/cy\" lang=\"cy\" hreflang=\"cy\" rel=\"alternate\">Cymraeg</a>\n </li>\n </ul>\n</nav>"
+ },
+ {
+ "name": "item attributes",
+ "options": {
+ "items": [
+ {
+ "text": "English",
+ "lang": "en",
+ "current": true
+ },
+ {
+ "text": "Cymraeg",
+ "lang": "cy",
+ "href": "#/cy",
+ "attributes": {
+ "data-attribute": "my-attribute"
+ }
+ }
+ ]
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n <ul class=\"govuk-language-switcher__list\">\n <li class=\"govuk-language-switcher__list-item\">\n <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/cy\" lang=\"cy\" hreflang=\"cy\" rel=\"alternate\" data-attribute=\"my-attribute\">Cymraeg</a>\n </li>\n </ul>\n</nav>"
+ },
+ {
+ "name": "html",
+ "options": {
+ "items": [
+ {
+ "text": "English",
+ "lang": "en",
+ "current": true
+ },
+ {
+ "html": "<span>Cymraeg</span>",
+ "lang": "cy",
+ "href": "#/cy"
+ }
+ ]
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n <ul class=\"govuk-language-switcher__list\">\n <li class=\"govuk-language-switcher__list-item\">\n <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/cy\" lang=\"cy\" hreflang=\"cy\" rel=\"alternate\"><span>Cymraeg</span></a>\n </li>\n </ul>\n</nav>"
+ }
+ ]
+}
diff --git a/packages/govuk-frontend/dist/govuk/components/language-switcher/macro-options.json b/packages/govuk-frontend/dist/govuk/components/language-switcher/macro-options.json
new file mode 100644
index 000000000..ba8f4ce4f
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/language-switcher/macro-options.json
@@ -0,0 +1,76 @@
+[
+ {
+ "name": "items",
+ "type": "array",
+ "required": true,
+ "description": "The languages to display within the language switcher.",
+ "params": [
+ {
+ "name": "text",
+ "type": "string",
+ "required": true,
+ "description": "If `html` is set, this is not required. Name of the language, written in that language (for example, \"Cymraeg\" for Welsh). If `html` is provided, the `text` option will be ignored."
+ },
+ {
+ "name": "html",
+ "type": "string",
+ "required": true,
+ "description": "If `text` is set, this is not required. HTML to use for the language item. If `html` is provided, the `text` option will be ignored."
+ },
+ {
+ "name": "lang",
+ "type": "string",
+ "required": true,
+ "description": "The language tag for the language item text (for example, `cy` for Welsh). Added as a `lang` attribute so that assistive technologies pronounce the language name correctly."
+ },
+ {
+ "name": "hrefLang",
+ "type": "string",
+ "required": false,
+ "description": "The language tag for the linked page (for example, `cy` for Welsh). Added as an `hreflang` attribute for search engines and other machine readers. Defaults to `lang` when omitted."
+ },
+ {
+ "name": "dir",
+ "type": "string",
+ "required": false,
+ "description": "The text direction for the language item element. Use this on every item when the switcher includes languages that use scripts with different directions."
+ },
+ {
+ "name": "href",
+ "type": "string",
+ "required": false,
+ "description": "Link to the current page in this language."
+ },
+ {
+ "name": "current",
+ "type": "boolean",
+ "required": false,
+ "description": "Whether this is the language of the current page. Defaults to `true` when `href` is not provided."
+ },
+ {
+ "name": "attributes",
+ "type": "object",
+ "required": false,
+ "description": "HTML attributes to add to the language item anchor."
+ }
+ ]
+ },
+ {
+ "name": "ariaLabel",
+ "type": "string",
+ "required": false,
+ "description": "Plain text label identifying the navigation landmark to screen readers. Write it in the language of the current page. Defaults to \"Language switcher\"."
+ },
+ {
+ "name": "classes",
+ "type": "string",
+ "required": false,
+ "description": "Classes to add to the language switcher container."
+ },
+ {
+ "name": "attributes",
+ "type": "object",
+ "required": false,
+ "description": "HTML attributes to add to the language switcher container."
+ }
+]
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/_mixin.scss b/packages/govuk-frontend/dist/govuk/components/service-navigation/_mixin.scss
index 96d26fc6c..d16f8771c 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/_mixin.scss
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/_mixin.scss
@@ -26,6 +26,7 @@
@media #{base.govuk-from-breakpoint(tablet)} {
flex-direction: row;
flex-wrap: wrap;
+ align-items: center;
}
}
@@ -114,6 +115,25 @@
// nav items and use slots.
.govuk-service-navigation__wrapper {
flex-grow: 1;
+
+ // If the end slot is right-aligned, add some extra spacing to the right of
+ // the navigation. This ensures that the two elements don't get too close as
+ // viewports shrink but before the end slot content wraps to the next line.
+ &:has(+ .govuk-service-navigation__end) {
+ @media #{base.govuk-from-breakpoint(tablet)} {
+ margin-right: base.govuk-spacing(4);
+ }
+ }
+ }
+
+ .govuk-service-navigation__end {
+ width: 100%;
+ }
+
+ @media #{base.govuk-from-breakpoint(tablet)} {
+ .govuk-service-navigation__end {
+ width: auto;
+ }
}
//
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json b/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json
index 9161446e0..cdf49259c 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json
@@ -32,7 +32,7 @@
"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>"
+ "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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with navigation with a current item",
@@ -61,7 +61,7 @@
"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.",
"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=\"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>"
+ "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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with large navigation",
@@ -137,7 +137,7 @@
"description": "",
"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=\"#/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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with HTML navigation items",
@@ -161,7 +161,7 @@
"description": "",
"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 \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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with non-link navigation items",
@@ -182,7 +182,7 @@
"description": "",
"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 <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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with service name",
@@ -193,7 +193,7 @@
"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 <span class=\"govuk-service-navigation__text\">Service name</span>\n </span>\n\n \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 <span class=\"govuk-service-navigation__text\">Service name</span>\n </span>\n\n \n\n \n </div>\n\n </div>\n\n </section>"
},
{
"name": "with service link",
@@ -205,7 +205,7 @@
"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 Service name\n </a>\n </span>\n\n \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 Service name\n </a>\n </span>\n\n \n\n \n </div>\n\n </div>\n\n </section>"
},
{
"name": "with long service name",
@@ -217,7 +217,7 @@
"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 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>"
+ "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\n \n </div>\n\n </div>\n\n </section>"
},
{
"name": "with service name and navigation",
@@ -253,7 +253,7 @@
"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>"
+ "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\n \n </div>\n\n </div>\n\n </section>"
},
{
"name": "inverse",
@@ -287,7 +287,7 @@
"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>"
+ "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\n \n </div>\n\n </div>\n\n </section>"
},
{
"name": "with collapseNavigationOnMobile set to false",
@@ -319,7 +319,7 @@
"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>"
+ "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\n \n </div>\n\n </div>\n\n </section>"
},
{
"name": "with a single navigation item",
@@ -337,7 +337,7 @@
"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>"
+ "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\n \n </div>\n\n </div>\n\n </section>"
},
{
"name": "with a single navigation item and collapseNavigationOnMobile set to true",
@@ -356,7 +356,7 @@
"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 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>"
+ "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\n \n </div>\n\n </div>\n\n </section>"
},
{
"name": "with no options set",
@@ -365,7 +365,7 @@
"description": "If no serviceName or navigation is set, don't render anything.",
"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>"
+ "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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "attributes",
@@ -380,7 +380,7 @@
"description": "",
"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>"
+ "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\n \n </div>\n\n </div>\n\n </section>"
},
{
"name": "classes",
@@ -392,7 +392,7 @@
"description": "",
"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>"
+ "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\n \n </div>\n\n </div>\n\n </section>"
},
{
"name": "with custom aria-label",
@@ -404,7 +404,7 @@
"description": "",
"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>"
+ "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\n \n </div>\n\n </div>\n\n </section>"
},
{
"name": "with custom navigation toggle text",
@@ -425,7 +425,7 @@
"description": "",
"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 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>"
+ "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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with custom navigation toggle label",
@@ -446,7 +446,7 @@
"description": "",
"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 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>"
+ "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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with identical navigation toggle text and label",
@@ -468,7 +468,7 @@
"description": "",
"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 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>"
+ "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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with custom navigation label",
@@ -489,7 +489,7 @@
"description": "",
"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 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>"
+ "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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with custom navigation toggle text and navigation label",
@@ -511,7 +511,7 @@
"description": "",
"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 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>"
+ "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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with custom navigation classes",
@@ -532,7 +532,7 @@
"description": "",
"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 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>"
+ "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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with custom navigation ID",
@@ -553,7 +553,7 @@
"description": "",
"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 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>"
+ "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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with navigation having empty values",
@@ -577,7 +577,7 @@
"description": "",
"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\">\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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with navigation having only empty values",
@@ -593,7 +593,7 @@
"description": "",
"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>"
+ "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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with navigation being an empty array",
@@ -604,7 +604,7 @@
"description": "",
"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>"
+ "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\n \n </div>\n\n </div>\n\n </div>"
},
{
"name": "with navigation with an active item",
@@ -633,7 +633,66 @@
"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>"
+ "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\n \n </div>\n\n </div>\n\n </div>"
+ },
+ {
+ "name": "with language switcher",
+ "options": {
+ "serviceName": "Service name",
+ "navigation": [
+ {
+ "href": "#/1",
+ "text": "Navigation item 1",
+ "active": true
+ },
+ {
+ "href": "#/2",
+ "text": "Navigation item 2"
+ },
+ {
+ "href": "#/3",
+ "text": "Navigation item 3"
+ }
+ ],
+ "slots": {
+ "end": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n <ul class=\"govuk-language-switcher__list\">\n <li class=\"govuk-language-switcher__list-item\">\n <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/cy\" lang=\"cy\" hreflang=\"cy\" rel=\"alternate\">Cymraeg</a>\n </li>\n </ul>\n</nav>"
+ }
+ },
+ "hidden": false,
+ "description": "HTML rendered by the language switcher component can be injected into the `end` slot of the service header.",
+ "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 <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 govuk-service-navigation__item--active\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\" aria-current=\"true\">\n \n <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 1</strong>\n\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 </ul>\n </nav>\n\n \n </div>\n\n <nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n <ul class=\"govuk-language-switcher__list\">\n <li class=\"govuk-language-switcher__list-item\">\n <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/cy\" lang=\"cy\" hreflang=\"cy\" rel=\"alternate\">Cymraeg</a>\n </li>\n </ul>\n</nav></div>\n\n </section>"
+ },
+ {
+ "name": "with right-aligned language switcher",
+ "options": {
+ "serviceName": "Service name",
+ "navigation": [
+ {
+ "href": "#/1",
+ "text": "Navigation item 1",
+ "active": true
+ },
+ {
+ "href": "#/2",
+ "text": "Navigation item 2"
+ },
+ {
+ "href": "#/3",
+ "text": "Navigation item 3"
+ }
+ ],
+ "slots": {
+ "end": "<nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n <ul class=\"govuk-language-switcher__list\">\n <li class=\"govuk-language-switcher__list-item\">\n <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/cy\" lang=\"cy\" hreflang=\"cy\" rel=\"alternate\">Cymraeg</a>\n </li>\n </ul>\n</nav>",
+ "endRightAligned": true
+ }
+ },
+ "hidden": false,
+ "description": "HTML rendered by the language switcher component can be injected into the `end` slot of the service header.",
+ "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 <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 govuk-service-navigation__item--active\">\n <a class=\"govuk-service-navigation__link\" href=\"#/1\" aria-current=\"true\">\n \n <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 1</strong>\n\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 </ul>\n </nav>\n\n \n <div class=\"govuk-service-navigation__end\">\n <nav class=\"govuk-language-switcher\" aria-label=\"Language switcher\">\n <ul class=\"govuk-language-switcher__list\">\n <li class=\"govuk-language-switcher__list-item\">\n <span class=\"govuk-language-switcher__text\" lang=\"en\" aria-current=\"true\">English</span>\n </li>\n <li class=\"govuk-language-switcher__list-item\">\n <a class=\"govuk-language-switcher__link\" href=\"#/cy\" lang=\"cy\" hreflang=\"cy\" rel=\"alternate\">Cymraeg</a>\n </li>\n </ul>\n</nav>\n </div>\n </div>\n\n </div>\n\n </section>"
},
{
"name": "with slotted content",
@@ -649,7 +708,28 @@
"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>[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>"
+ "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\n \n </div>\n\n <div>[end]</div></div>\n\n </section>"
+ },
+ {
+ "name": "with right-aligned end slot",
+ "options": {
+ "serviceName": "Service name",
+ "navigation": [
+ {
+ "href": "#/1",
+ "text": "Navigation item 1"
+ }
+ ],
+ "slots": {
+ "end": "<div>[end]</div>",
+ "endRightAligned": 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 <span class=\"govuk-service-navigation__text\">Service name</span>\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 </ul>\n </nav>\n\n \n <div class=\"govuk-service-navigation__end\">\n <div>[end]</div>\n </div>\n </div>\n\n </div>\n\n </section>"
}
],
"previewLayout": "full-width"
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/macro-options.json b/packages/govuk-frontend/dist/govuk/components/service-navigation/macro-options.json
index 86b04adac..90b10cd39 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/macro-options.json
@@ -127,6 +127,12 @@
"required": false,
"description": "HTML injected at the end of the service header container."
},
+ {
+ "name": "endRightAligned",
+ "type": "boolean",
+ "required": false,
+ "description": "If `true`, renders the `end` slot inline in the service navigation row and right aligns it at tablet and above. Defaults to `false`."
+ },
{
"name": "navigationStart",
"type": "string",
Action run for 8fdff42 |
📋 StatsFile sizes
No changes to module sizes. Action run for 8fdff42 |
1 task
NickColley
reviewed
Jun 11, 2026
| - text: 中文 | ||
| lang: zh | ||
| href: '#/zh' | ||
| - name: with translated navigation label |
Contributor
There was a problem hiding this comment.
Observation: this example can only be tested properly if the document itself is set to lang=cy.
Should the component itself set the lang at the top level? 🤔
Contributor
Author
There was a problem hiding this comment.
We've discussed this, but the idea is that the language switcher is a dumb UI element I think - it's up the service to forward to a page which is set up properly in that language. This would be the guidance approach. At least that's our thinking for now.
Contributor
Author
There was a problem hiding this comment.
I've set a lang attribute which I think should allow for testing?
Contributor
There was a problem hiding this comment.
I guess my worry is that if we rely on the wider document to be setup properly then many services may not do that work and this component doesnt work as well as it could, so if there's a sensible way to set it at the component level when it's a different language - even if it's duplicating the documents lang set - is it worth doing?
Contributor
There was a problem hiding this comment.
In my testing (may have changed by now) when non english is read out without the correct lang it's essentially gibberish since screen reader relies on the lang attribute to switch engines, so by telling people to set it at the top level of the component we can test and confirm this component is audible in different languages in isolation
Contributor
Author
There was a problem hiding this comment.
I'm going to add these thoughts to our decision log for the squad to hash out - they're all great points.
domoscargin
force-pushed
the
language-switcher
branch
from
c8b4c98 to
3dd37e0
Compare
domoscargin
force-pushed
the
language-switcher
branch
from
3dd37e0 to
5a0e991
Compare
selfthinker
requested changes
Jun 17, 2026
selfthinker
left a comment
selfthinker
left a comment
Contributor
There was a problem hiding this comment.
I've looked at this from the accessibility perspective and am happy with it except for the incorrect content I've highlighted. Other things can be addressed in later PRs/cycles.
A few more things I've noticed, that could be addressed at a later stage:
- It would be quite important if the switcher could be tested fully, meaning clicking a link should do something. For that we'd need at least one of the pages with an English/Welsh switcher to have a Welsh equivalent.
- It would be good to add a switcher to the header kitchen sink example page.
- One of the things I was a bit wary about is the position of the component in combination with surrounding headings. I think it works fine without a (hidden) heading of its own in the current examples. But we might need to add one later, or fix not ever needing one with guidance.
- As discussed yesterday, we should allow for the links to be buttons at one point.
domoscargin
force-pushed
the
language-switcher
branch
from
5a0e991 to
2f0c782
Compare
domoscargin
force-pushed
the
language-switcher
branch
from
2f0c782 to
b0dafa9
Compare
selfthinker
requested changes
Jun 17, 2026
selfthinker
left a comment
selfthinker
left a comment
Contributor
There was a problem hiding this comment.
I've got one last comment. Otherwise it's looking good. 👍
NickColley
reviewed
Jun 17, 2026
| padding: base.govuk-spacing(3) 0; | ||
|
|
||
| // Match the service navigation row height at the switcher's 16px size. | ||
| line-height: math.div(29, 16); |
Contributor
There was a problem hiding this comment.
This makes the text align but the border is now much larger size, is this intended?
I wonder if there's a different way to get this alignment e.g.
.govuk-service-navigation__container {
align-items: center;
}If this is appropriate, it may also mean we dont need to add the margins/paddings for this case.
Contributor
Author
There was a problem hiding this comment.
Great suggestion! I've been more explicit about the size of the separator now, and removed any service-navigation styles from the language switcher.
The service nav should now align stuff in the right-aligned end slot agnostically.
NickColley
reviewed
Jun 17, 2026
|
|
||
| .govuk-language-switcher__list-item { | ||
| display: inline-block; | ||
| margin-bottom: base.govuk-spacing(1); |
Contributor
There was a problem hiding this comment.
I believe if we use something like this we can avoid the margin-bottom which may also mean we dont need to remove it when it's inside the service navigation
Suggested change
| margin-bottom: base.govuk-spacing(1); | |
| display: inline-flex; | |
| flex-wrap: wrap: | |
| gap: base.govuk-spacing(1); |
Contributor
Author
There was a problem hiding this comment.
Nice, I've done something similar to this.
NickColley
reviewed
Jun 17, 2026
|
|
||
| .govuk-service-navigation .govuk-language-switcher__list-item { | ||
| @media #{base.govuk-from-breakpoint(tablet)} { | ||
| margin-bottom: 0; |
Contributor
There was a problem hiding this comment.
I believe if we use flexbox in this component then we wont need to do this.
Contributor
Author
There was a problem hiding this comment.
Yup, all service navigation specific styling is now out of the language switcher, which is nice!
domoscargin
force-pushed
the
language-switcher
branch
from
b0dafa9 to
8fdff42
Compare
selfthinker
approved these changes
Jun 18, 2026
selfthinker
left a comment
selfthinker
left a comment
Contributor
There was a problem hiding this comment.
This looks good to me. 👍
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a language switcher to change language on the page.
English/Welsh toggle
Multiple languages
Service navigation - right-aligned
endslotService navigation - small viewport
Outstanding questions