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.
nhsuk · Nov 12, 2024 · ec40268 · ec40268
1 parent 08add40
commit ec40268
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 7 deletions.
diff --git a/app/components/header/header-navigation.njk b/app/components/header/header-navigation.njk
@@ -10,10 +10,7 @@
         {
           "url"  : "https://www.nhs.uk/conditions",
           "label" : "Health A-Z",
-          "classes": "app-header__navigation-item--current",
-          "attributes": {
-            "aria-current": "true"
-          }
+          "classes": "app-header__navigation-item--my-modifier"
         },
         {
           'url' : 'https://www.nhs.uk/live-well/',
@@ -25,7 +22,8 @@
         },
         {
           'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
-          'label' : 'Care and support'
+          'label' : 'Care and support',
+          'active': true
         },
         {
           'url'  : 'https://www.nhs.uk/pregnancy/',

diff --git a/packages/components/header/_header.scss b/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 the expanded menu, the current item should
+    // revert back to having a transparent border instead,
+    // with a border on the left instead (added below)
+    &[aria-current="page"],
+    &[aria-current="true"] {
+      box-shadow: none;
+    }
+
+    &:active,
+    &:focus {
+      border-bottom-color: $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 nhsuk-spacing(1) 0 $color_nhsuk-blue;
+  }
 }
 
 .nhsuk-header__drop-down--hidden {

diff --git a/packages/components/header/template.njk b/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.url }}">{{ 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.label -}}</strong>
+          {% else %}
+            {{- item.label -}}
+          {% 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">