Release v5.6.0

[querkmachine]

v5.6.0 (Feature release)

To install this version with npm, run npm install govuk-frontend@5.6.0. You can also find more information about how to stay up to date in our documentation.

New features

Make it easier to navigate complex services with the Service navigation component

We've added a new Service navigation component to help users to navigate services with multiple top-level sections. This replaces the navigation functions of the Header component, which will be deprecated in a future release of GOV.UK Frontend.

This component includes some features we consider experimental. We intend to iterate these features in response to user feedback. These are:

• moving the service name from the Header to the Service navigation
• providing slots for injecting custom HTML into specified locations within the component

We introduced this change in pull request #5206: Service navigation component.

[github-actions[bot]]

JavaScript changes to GitHub release

diff --git a/dist/govuk-frontend-5.5.0.min.js b/dist/govuk-frontend-5.6.0.min.js
index 894c56aa3..d3dafdc1d 100644
--- a/dist/govuk-frontend-5.5.0.min.js
+++ b/dist/govuk-frontend-5.6.0.min.js
@@ -1,4 +1,4 @@
-const version = "5.5.0";
+const version = "5.6.0";

 function normaliseString(e, t) {
     const n = e ? e.trim() : "";
@@ -899,6 +899,45 @@ class Radios extends GOVUKFrontendComponent {
     }
 }
 Radios.moduleName = "govuk-radios";
+class ServiceNavigation extends GOVUKFrontendComponent {
+    constructor(e) {
+        if (super(), this.$module = void 0, this.$menuButton = void 0, this.$menu = void 0, this.menuIsOpen = !1, this.mql = null, !e) throw new ElementError({
+            componentName: "Service Navigation",
+            element: e,
+            identifier: "Root element (`$module`)"
+        });
+        this.$module = e;
+        const t = e.querySelector(".govuk-js-service-navigation-toggle");
+        if (!t) return this;
+        const n = t.getAttribute("aria-controls");
+        if (!n) throw new ElementError({
+            componentName: "Service Navigation",
+            identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`)'
+        });
+        const i = document.getElementById(n);
+        if (!i) throw new ElementError({
+            componentName: "Service Navigation",
+            element: i,
+            identifier: `Navigation (\`<ul id="${n}">\`)`
+        });
+        this.$menu = i, this.$menuButton = t, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+    }
+    setupResponsiveChecks() {
+        const e = getBreakpoint("tablet");
+        if (!e.value) throw new ElementError({
+            componentName: "Service Navigation",
+            identifier: `CSS custom property (\`${e.property}\`) on pseudo-class \`:root\``
+        });
+        this.mql = window.matchMedia(`(min-width: ${e.value})`), "addEventListener" in this.mql ? this.mql.addEventListener("change", (() => this.checkMode())) : this.mql.addListener((() => this.checkMode())), this.checkMode()
+    }
+    checkMode() {
+        this.mql && this.$menu && this.$menuButton && (this.mql.matches ? (this.$menu.removeAttribute("hidden"), this.$menuButton.setAttribute("hidden", "")) : (this.$menuButton.removeAttribute("hidden"), this.$menuButton.setAttribute("aria-expanded", this.menuIsOpen.toString()), this.menuIsOpen ? this.$menu.removeAttribute("hidden") : this.$menu.setAttribute("hidden", "")))
+    }
+    handleMenuButtonClick() {
+        this.menuIsOpen = !this.menuIsOpen, this.checkMode()
+    }
+}
+ServiceNavigation.moduleName = "govuk-service-navigation";
 class SkipLink extends GOVUKFrontendComponent {
     constructor(e) {
         var t;
@@ -1095,6 +1134,7 @@ function initAll(e) {
             [NotificationBanner, e.notificationBanner],
             [PasswordInput, e.passwordInput],
             [Radios],
+            [ServiceNavigation],
             [SkipLink],
             [Tabs]
         ],
@@ -1126,9 +1166,10 @@ export {
     NotificationBanner,
     PasswordInput,
     Radios,
+    ServiceNavigation,
     SkipLink,
     Tabs,
     createAll,
     initAll,
     version
-}; //# sourceMappingURL=govuk-frontend-5.5.0.min.js.map
\ No newline at end of file
+}; //# sourceMappingURL=govuk-frontend-5.6.0.min.js.map
\ No newline at end of file

---

Action run for 8dcbb4e03e6248490cf38c7375fcd16853ef51e5

[github-actions[bot]]

Stylesheets changes to GitHub release

diff --git a/dist/govuk-frontend-5.5.0.min.css b/dist/govuk-frontend-5.6.0.min.css
index f01266081..6ffaf3b36 100644
--- a/dist/govuk-frontend-5.5.0.min.css
+++ b/dist/govuk-frontend-5.6.0.min.css
@@ -1,7 +1,7 @@
 @charset "UTF-8";

 :root {
-    --govuk-frontend-version: "5.5.0";
+    --govuk-frontend-version: "5.6.0";
     --govuk-frontend-breakpoint-mobile: 20rem;
     --govuk-frontend-breakpoint-tablet: 40.0625rem;
     --govuk-frontend-breakpoint-desktop: 48.0625rem
@@ -3687,6 +3687,14 @@ only screen and (min-resolution:2dppx) {
     clear: both
 }

+.govuk-header--full-width-border {
+    border-bottom-color: #1d70b8
+}
+
+.govuk-header--full-width-border .govuk-header__container {
+    border-bottom-color: transparent
+}
+
 .govuk-header__logotype {
     display: inline-block;
     position: relative;
@@ -5117,6 +5125,311 @@ screen and (forced-colors:active) {
     border-color: #0b0c0c
 }

+.govuk-service-navigation {
+    border-bottom: 1px solid #b1b4b6;
+    background-color: #f3f2f1
+}
+
+.govuk-service-navigation__container {
+    display: flex;
+    flex-direction: column;
+    align-items: start
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-navigation__container {
+        flex-direction: row;
+        flex-wrap: wrap
+    }
+}
+
+.govuk-service-navigation__item,
+.govuk-service-navigation__service-name {
+    position: relative;
+    margin: 10px 0;
+    border: 0 solid #1a65a6
+}
+
+@media (min-width:40.0625em) {
+
+    .govuk-service-navigation__item,
+    .govuk-service-navigation__service-name {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding: 20px 0
+    }
+
+    .govuk-service-navigation__item:not(:last-child),
+    .govuk-service-navigation__service-name:not(:last-child) {
+        margin-right: 20px
+    }
+}
+
+@media (min-width:40.0625em) and (min-width:40.0625em) {
+
+    .govuk-service-navigation__item:not(:last-child),
+    .govuk-service-navigation__service-name:not(:last-child) {
+        margin-right: 30px
+    }
+}
+
+@media (max-width:40.0525em) {
+    .govuk-service-navigation__item--active {
+        margin-left: -15px;
+        padding-left: 10px;
+        border-left-width: 5px
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-navigation__item--active {
+        padding-bottom: 15px;
+        border-bottom-width: 5px
+    }
+}
+
+.govuk-service-navigation__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-service-navigation__link {
+        font-family: sans-serif
+    }
+}
+
+.govuk-service-navigation__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-service-navigation__link:focus {
+    outline: 3px solid transparent;
+    background-color: #fd0;
+    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+    text-decoration: none;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone
+}
+
+.govuk-service-navigation__link:not(:hover):not(:active) {
+    text-decoration: none
+}
+
+.govuk-service-navigation__link:link,
+.govuk-service-navigation__link:visited {
+    color: #1d70b8
+}
+
+.govuk-service-navigation__link:hover {
+    color: #003078
+}
+
+.govuk-service-navigation__link:active,
+.govuk-service-navigation__link:focus {
+    color: #0b0c0c
+}
+
+.govuk-service-navigation__link:not(:hover):not(:focus) {
+    color: #1a65a6
+}
+
+.govuk-service-navigation__service-name {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 700;
+    font-size: 1rem;
+    line-height: 1.25
+}
+
+@media print {
+    .govuk-service-navigation__service-name {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-navigation__service-name {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-service-navigation__service-name {
+        font-size: 14pt;
+        line-height: 1.15
+    }
+}
+
+.govuk-service-navigation__service-name .govuk-service-navigation__link:link,
+.govuk-service-navigation__service-name .govuk-service-navigation__link:visited {
+    color: #0b0c0c
+}
+
+@media print {
+
+    .govuk-service-navigation__service-name .govuk-service-navigation__link:link,
+    .govuk-service-navigation__service-name .govuk-service-navigation__link:visited {
+        color: #000
+    }
+}
+
+.govuk-service-navigation__service-name .govuk-service-navigation__link:hover {
+    color: rgba(11, 12, 12, .99)
+}
+
+.govuk-service-navigation__service-name .govuk-service-navigation__link:active,
+.govuk-service-navigation__service-name .govuk-service-navigation__link:focus {
+    color: #0b0c0c
+}
+
+@media print {
+
+    .govuk-service-navigation__service-name .govuk-service-navigation__link:active,
+    .govuk-service-navigation__service-name .govuk-service-navigation__link:focus {
+        color: #000
+    }
+}
+
+.govuk-service-navigation__toggle {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 700;
+    font-size: 1rem;
+    line-height: 1.25;
+    display: inline-flex;
+    margin: 0 0 10px;
+    padding: 0;
+    border: 0;
+    color: #1a65a6;
+    background: none;
+    word-break: break-all;
+    cursor: pointer;
+    align-items: center
+}
+
+@media print {
+    .govuk-service-navigation__toggle {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-navigation__toggle {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-service-navigation__toggle {
+        font-size: 14pt;
+        line-height: 1.15
+    }
+}
+
+.govuk-service-navigation__toggle:focus {
+    outline: 3px solid transparent;
+    color: #0b0c0c;
+    background-color: #fd0;
+    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+    text-decoration: none;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone
+}
+
+.govuk-service-navigation__toggle:after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
+    clip-path: polygon(0 0, 50% 100%, 100% 0);
+    border-color: transparent;
+    border-style: solid;
+    border-width: 8.66px 5px 0;
+    border-top-color: inherit;
+    content: "";
+    margin-left: 5px
+}
+
+.govuk-service-navigation__toggle[aria-expanded=true]:after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
+    clip-path: polygon(50% 0, 0 100%, 100% 100%);
+    border-color: transparent;
+    border-style: solid;
+    border-width: 0 5px 8.66px;
+    border-bottom-color: inherit
+}
+
+.govuk-service-navigation__toggle[hidden] {
+    display: none
+}
+
+.govuk-service-navigation__list {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.25;
+    margin: 0 0 15px;
+    padding: 0;
+    list-style: none
+}
+
+@media print {
+    .govuk-service-navigation__list {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-navigation__list {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-service-navigation__list {
+        font-size: 14pt;
+        line-height: 1.15
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-navigation__list {
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 0
+    }
+}
+
+@media (min-width:40.0625em) and (-ms-high-contrast:none),
+screen and (min-width:40.0625em) and (-ms-high-contrast:active) {
+    .govuk-service-navigation__list {
+        display: block
+    }
+}
+
+.govuk-service-navigation__active-fallback {
+    font-weight: inherit
+}
+
 .govuk-skip-link {
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -7609,4 +7922,4 @@ screen and (-ms-high-contrast:active) {
     }
 }

-/*# sourceMappingURL=govuk-frontend-5.5.0.min.css.map */
\ No newline at end of file
+/*# sourceMappingURL=govuk-frontend-5.6.0.min.css.map */
\ No newline at end of file

---

Action run for 8dcbb4e03e6248490cf38c7375fcd16853ef51e5

[github-actions[bot]]

Other changes to GitHub release

diff --git a/dist/VERSION.txt b/dist/VERSION.txt
index d50359de1..1bc788d3b 100644
--- a/dist/VERSION.txt
+++ b/dist/VERSION.txt
@@ -1 +1 @@
-5.5.0
+5.6.0

---

Action run for 8dcbb4e03e6248490cf38c7375fcd16853ef51e5

[github-actions[bot]]

:clipboard: Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	118.4 KiB
dist/govuk-frontend-development.min.js	43.63 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	90.19 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	84.69 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.05 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	118.39 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	43.62 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	4.97 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	81.8 KiB	41.48 KiB
accordion.mjs	23.5 KiB	12.39 KiB
button.mjs	5.98 KiB	2.69 KiB
character-count.mjs	22.4 KiB	9.92 KiB
checkboxes.mjs	5.83 KiB	2.83 KiB
error-summary.mjs	7.89 KiB	3.46 KiB
exit-this-page.mjs	17.1 KiB	9.26 KiB
header.mjs	4.46 KiB	2.6 KiB
notification-banner.mjs	6.26 KiB	2.62 KiB
password-input.mjs	15.15 KiB	7.25 KiB
radios.mjs	4.83 KiB	2.38 KiB
service-navigation.mjs	4.46 KiB	2.69 KiB
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.05 KiB	6.06 KiB

View stats and visualisations on the review app

---

Action run for 8dcbb4e03e6248490cf38c7375fcd16853ef51e5