Left align header navigation items by default

CHANGELOG.md

@@ -24,6 +24,19 @@
   <nav class="nhsuk-navigation" aria-label="Menu">
   ```
 
+- Update header navigation to align items to the left. ([PR 1138](https://github.com/nhsuk/nhsuk-frontend/pull/1138)). To restore the previous behaviour, where navigation items appeared evenly spaced out, use the `.nhsuk-header__navigation-list--justified` modifier class:
+
+  ```html
+  <ul class="nhsuk-header__navigation-list nhsuk-header__navigation-list--justified">
+    <li class="nhsuk-header__navigation-item">
+      <a class="nhsuk-header__navigation-link" href="#">Health A-Z</a>
+    </li>
+    ...
+  </ul>
+  ```
+
+  If you are using the `.nhsuk-header__navigation-list--left-aligned` modifier class, this can now be removed.
+
 :boom: **Breaking changes**
 
 - Remove the boolean `showNav`, `showSearch` and `transactional` options from the header component. Respective parts of the header are now shown if values for `primaryLinks`, `search` or `transactionalService` options are provided. Additionally, the `searchAction` option is renamed `search.action` and the `searchInputName` option is renamed `search.name`. Finally, the label, button and placeholder text for the search input can be updated using the new `search.visuallyHiddenLabel`, `search.visuallyHiddenButton` and `search.placeholder` options. ([PR 996](https://github.com/nhsuk/nhsuk-frontend/pull/996))

packages/components/header/_header-white.scss

@@ -67,7 +67,7 @@
     }
   }
 
-  .nhsuk-header__navigation-list {
+  .nhsuk-navigation {
     border-top-width: 0;
   }
 }
@@ -82,7 +82,7 @@
     }
   }
 
-  .nhsuk-header__navigation-list {
+  .nhsuk-navigation {
     border-top-color: $color_nhsuk-grey-5;
     border-top-width: 1px;
   }

packages/components/header/_header.scss

@@ -222,43 +222,50 @@
 }
 
 .nhsuk-navigation {
-  display: flex;
+  @include govuk-width-container;
 
   @include mq($until: tablet) {
     position: relative;
     z-index: 10;
   }
+
+  @include mq($from: tablet) {
+    border-top: 1px solid $color_transparent_nhsuk-white-20;
+  }
 }
 
 // Visible navigation list
 .nhsuk-header__navigation-list {
-  @include govuk-width-container;
+  display: flex;
+  flex-wrap: wrap;
   list-style: none;
+  margin: 0 (nhsuk-spacing(2) * -1);
   padding: 0;
-  width: 100%;
+  width: calc(100% + nhsuk-spacing(2) + nhsuk-spacing(2));
 
   @include mq($from: tablet) {
-    border-top: 1px solid $color_transparent_nhsuk-white-20;
-  }
-
-  @include mq($from: desktop) {
-    justify-content: space-between;
+    margin: 0 (nhsuk-spacing(3) * -1);
+    width: calc(100% + nhsuk-spacing(3) + nhsuk-spacing(3));
   }
 
   .js-enabled & {
-    display: flex;
-    gap: nhsuk-spacing(4);
+    flex-wrap: nowrap;
   }
 }
 
-.nhsuk-header__navigation-list--left-aligned {
+.nhsuk-header__navigation-list--justified {
   @include mq($from: desktop) {
-    justify-content: initial;
+    justify-content: space-between;
   }
 }
 
 .nhsuk-header__navigation-item {
   margin-bottom: 0;
+  padding: 0 nhsuk-spacing(2);
+
+  @include mq($from: tablet) {
+    padding: 0 nhsuk-spacing(3);
+  }
 }
 
 // This is a <strong> element used as a fallback mechanism for visually
@@ -330,10 +337,13 @@
   top: 100%;
   left: 0;
 
+  @include mq($until: tablet) {
+    margin: 0 (nhsuk-spacing(3) * -1);
+  }
+
   .nhsuk-header__navigation-link {
     @include govuk-width-container;
     @include nhsuk-link-style-no-visited-state;
-    padding: 12px 0;
 
     // When in expanded menu, a current item link should revert to having a
     // no box-shadow, with a box-shadow added to containing list item instead.
@@ -351,6 +361,7 @@
 
   .nhsuk-header__navigation-item {
     border-top: 1px solid $color_nhsuk-grey-5;
+    padding: 0;
   }
 
   // Current item within expended mobile menu gets blue line on left edge.
@@ -371,6 +382,11 @@
 .nhsuk-mobile-menu-container {
   align-self: center;
   display: none;
+  padding: 0 nhsuk-spacing(2);
+
+  @include mq($from: tablet) {
+    padding: 0 nhsuk-spacing(3);
+  }
 }
 
 .nhsuk-mobile-menu-container--visible {

packages/components/header/header.js

@@ -49,19 +49,13 @@ class Header {
   /**
    * Calculate breakpoints.
    *
-   * Calculate the breakpoints by summing the widths of
-   * each navigation item.
-   *
+   * Calculate breakpoints by summing the width of each navigation item.
    */
   calculateBreakpoints() {
-    // Get the width of the gap between each navigation item
-    const navigationListStyles = window.getComputedStyle(this.navigationList)
-    const gapPixels = navigationListStyles.getPropertyValue('gap')
-    const gap = Number(gapPixels.replace('px', ''))
-
     let childrenWidth = 0
     for (let i = 0; i < this.navigationList.children.length; i++) {
-      childrenWidth += this.navigationList.children[i].offsetWidth + gap
+      childrenWidth += this.navigationList.children[i].offsetWidth
+
       this.breakpoints[i] = childrenWidth
     }
   }
@@ -161,9 +155,6 @@ class Header {
     if (availableSpace < this.breakpoints[itemsVisible - 1]) {
       this.mobileMenuToggleButton.classList.add('nhsuk-header__menu-toggle--visible')
       this.mobileMenuContainer.classList.add('nhsuk-mobile-menu-container--visible')
-      if (itemsVisible === 2) {
-        return
-      }
       while (availableSpace < this.breakpoints[itemsVisible - 1]) {
         this.mobileMenu.insertBefore(this.navigationList.children[itemsVisible - 2], this.mobileMenu.firstChild)
         itemsVisible -= 1