Add current item indicator for header navigation (#1067)

* Add current item indicator for header navigation

Add support for indicating the current section, using either `current: true` (if the user is currently on this exact page) or `active: true` (if the user is in that section but not necessarily that exact page).

When displayed in the regular view within the blue header, the active links have a light-grey border at the bottom.

When displayed in the expanded menu view (eg on mobile), they have a blue border to their left.

* Remove custom class

* Fix focus style on expanded menu item

* Changed current item indicator in white nav to blue

* Bump mobile current item indicator to 8px

* Set current item in example header-org-white variant

* Update backstop images

* Fix

* Bump mobile nav current idem indicator to 6px

* Remove duplicate entries from changelog

merge issues

* Add entry to changelog

* Update backstop images

* Remove excess whitespace

* Fix: focus link in white header should always have black border

---------

Co-authored-by: Paul Robert Lloyd <me+git@paulrobertlloyd.com>

Author: frankieroberto

CHANGELOG.md

@@ -1,7 +1,11 @@
 # NHS.UK frontend Changelog
-  
+
 ## Unreleased
 
+:new: **New features**
+
+- The primary navigation in the header now lets you show which item is the current section or page. ([PR 1067](https://github.com/nhsuk/nhsuk-frontend/pull/1067))
+
 :wrench: **Fixes**
 
 - Fix appearance of disabled warning buttons ([Issue 1034]([https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/1034]))

app/components/header/header-navigation.njk

@@ -8,12 +8,8 @@
   {{ header({
       "primaryLinks": [
         {
-          "url"  : "https://www.nhs.uk/conditions",
-          "label" : "Health A-Z",
-          "classes": "app-header__navigation-item--current",
-          "attributes": {
-            "aria-current": "true"
-          }
+          href: "https://www.nhs.uk/conditions",
+          text: "Health A-Z"
         },
         {
           href: 'https://www.nhs.uk/live-well/',
@@ -25,7 +21,8 @@
         },
         {
           href: 'https://www.nhs.uk/conditions/social-care-and-support/',
-          text: 'Care and support'
+          text: 'Care and support',
+          active: true
         },
         {
           href: 'https://www.nhs.uk/pregnancy/',

app/components/header/header-org-white-nav.njk

@@ -19,7 +19,8 @@
       },
       {
         href: '#',
-        text: 'Wards and departments'
+        text: 'Wards and departments',
+        active: true
       },
       {
         href: '#',

app/components/header/header-org-white.njk

@@ -19,7 +19,8 @@
       },
       {
         href: '#',
-        text: 'Wards and departments'
+        text: 'Wards and departments',
+        active: true
       },
       {
         href: '#',

app/components/header/header-service-name-with-nav.njk

@@ -19,7 +19,8 @@
         },
         {
           href: '#',
-          text: 'Design system'
+          text: 'Design system',
+          current: true
         },
         {
           'url'  : '#',

app/components/header/index.njk

@@ -9,6 +9,7 @@
     "search": true,
     "primaryLinks": [
       {
+
         href: "https://www.nhs.uk/conditions",
         text: "Health A-Z"
       },

packages/components/header/_header-white.scss

@@ -81,5 +81,28 @@
 
   .nhsuk-header__navigation-link {
     @include nhsuk-link-style-no-visited-state;
+
+    // Visual indicator for current navigation item has blue line on
+    // bottom edge instead of grey in the regular Header nav
+    &[aria-current="page"],
+    &[aria-current="true"] {
+      box-shadow: inset 0 ($nhsuk-focus-width * -1) $color_nhsuk-blue;
+    }
+
+    &:focus {
+      box-shadow: inset 0 ($nhsuk-focus-width * -1) $color_nhsuk-black;
+    }
+  }
+
+  // Drop down navigation
+  .nhsuk-header__drop-down {
+    .nhsuk-header__navigation-link {
+      // 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.
+      &[aria-current="page"],
+      &[aria-current="true"] {
+        box-shadow: none;
+      }
+    }
   }
 }

packages/components/header/_header.scss

@@ -220,6 +220,13 @@
   margin-bottom: 0;
 }
 
+// This is a <strong> element used as a fallback mechanism for visually
+// indicating current page in scenarios where CSS isn’t available.
+// We don’t actually want it to be bold normally, so inherit parent font-weight.
+.nhsuk-header__navigation-item-active-fallback {
+  font-weight: inherit;
+}
+
 .nhsuk-header__navigation-link {
   @include nhsuk-font(16);
   @include nhsuk-link-style-header;
@@ -228,6 +235,14 @@
   padding: nhsuk-spacing(3) 2px;
   white-space: nowrap;
 
+  // Visual indicator for current navigation item has grey line on bottom edge,
+  // and no underline on the link.
+  &[aria-current="page"],
+  &[aria-current="true"] {
+    text-decoration: none;
+    box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-border-color;
+  }
+
   &:focus {
     box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-focus-text-color;
   }
@@ -277,11 +292,34 @@
   .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.
+    &[aria-current="page"],
+    &[aria-current="true"] {
+      box-shadow: none;
+    }
+
+    // But when focused the black line at the bottom should return,
+    // again using box-shadow.
+    &:focus {
+      box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-focus-text-color;
+    }
   }
 
   .nhsuk-header__navigation-item {
     border-top: 1px solid $color_nhsuk-grey-5;
   }
+
+  // Current item within expended mobile menu gets blue line on left edge.
+  //
+  // The blue line uses an inset box-shadow instead of a border, as there’s
+  // already a grey border on the top, and using 2 different colour borders
+  // creates an awkward diagonal line where they meet.
+  .nhsuk-header__navigation-item--current {
+    box-shadow: inset 6px 0 $color_nhsuk-blue;
+  }
 }
 
 .nhsuk-header__drop-down--hidden {

packages/components/header/template.njk

@@ -70,8 +70,20 @@
     <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
       <ul class="nhsuk-header__navigation-list {%- if params.primaryLinks.length < 4 %} nhsuk-header__navigation-list--left-aligned{% endif %}">
       {%- for item in params.primaryLinks %}
-        <li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {{- nhsukAttributes(item.attributes) }}>
-          <a class="nhsuk-header__navigation-link" href="{{ item.href if item.href else item.url }}">{{ item.text if item.text else item.label }}</a>
+        {% set linkInnerContent %}
+          {# Wrap active links in strong element so users who override colours
+             or styles still have some indicator of the current nav item. #}
+          {% if item.active or item.current %}
+            <strong class="nhsuk-header__navigation-item-active-fallback">{{- item.text -}}</strong>
+          {% else %}
+            {{- item.text -}}
+          {% endif %}
+        {% endset %}
+
+        <li class="nhsuk-header__navigation-item {%- if item.active or item.current %} nhsuk-header__navigation-item--current{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {{- nhsukAttributes(item.attributes) }}>
+          <a class="nhsuk-header__navigation-link"  href="{{item.url}}" {%- if item.active or item.current %} aria-current="{{ 'page' if item.current else 'true' }}"{% endif %}>
+            {{ linkInnerContent | safe }}
+          </a>
         </li>
         {%- endfor %}
         <li class="nhsuk-mobile-menu-container">