Header updates - breaking changes

CHANGELOG.md

@@ -5,6 +5,7 @@
 :new: **New features**
 
 - Output source maps and use minified code in examples ([PR 1152](https://github.com/nhsuk/nhsuk-frontend/pull/1152))
+- 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**
 
@@ -19,6 +20,48 @@ We've configured our build tasks to use [Browserslist](https://browsersl.ist) fo
 We've made fixes to NHS.UK frontend in the following pull requests:
 
 - [#1148: Fix Tabs component in Safari < 14 and Internet Explorer 11](https://github.com/nhsuk/nhsuk-frontend/pull/1148)
+- Fix appearance of the select element for more consistency between browsers and OS ([Issue 527](https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/527))
+- Fix appearance of disabled warning buttons ([Issue 1034]([https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/1034]))
+- Fix reverse button text colour ([PR 1080]([https://github.com/nhsuk/nhsuk-frontend/pull/1080]))
+- Fix details component requiring html param in uppercase ([PR 1090](https://github.com/nhsuk/nhsuk-frontend/pull/1090), [Issue 1089](https://github.com/nhsuk/nhsuk-frontend/issues/1089))
+- Update header navigation label from ’Primary navigation’ to ‘Menu’, and remove superfluous `role` and `id` attributes. ([PR 1073](https://github.com/nhsuk/nhsuk-frontend/pull/1073)) To update your HTML, replace:
+
+  ```html
+  <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+  ```
+
+  with
+
+  ```html
+  <nav class="nhsuk-navigation" aria-label="Menu">
+  ```
+
+: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))
+
+- Update `primaryLinks` in the header to use `text` and `href` instead of `label` and `url` ([PR 1083](https://github.com/nhsuk/nhsuk-frontend/pull/1083))
+
+- Update NHS logo in the header so that it has higher contrast when focused. ([PR 1047]([https://github.com/nhsuk/nhsuk-frontend/pull/1047]))
+
+  Previously the logo used the following SVG:
+
+  ```svg
+  <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
+    <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
+    <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
+  </svg>
+  ```
+
+  This has been updated to use the following SVG:
+
+  ```svg
+  <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100">
+    <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"/>
+  </svg>
+  ```
+
+- Remove hardcoded home link from navigation ([PR 986](https://github.com/nhsuk/nhsuk-frontend/pull/986))
 
 ## 9.3.0 - 13 February 2025
 

app/_templates/layout.njk

@@ -21,16 +21,20 @@
 
     <script src="{{ baseUrl }}javascripts/nhsuk-{{ version }}.min.js" defer></script>
 
-    <link rel="shortcut icon" href="{{ baseUrl }}assets/favicons/favicon.ico" type="image/x-icon">
-    <link rel="apple-touch-icon" href="{{ baseUrl }}assets/favicons/apple-touch-icon-180x180.png">
-    <link rel="mask-icon" href="{{ baseUrl }}assets/favicon.svg" color="#005eb8">
-    <link rel="icon" sizes="192x192" href="{{ baseUrl }}assets/favicon-192x192.png">
-    <meta name="msapplication-TileImage" content="{{ baseUrl }}assets/mediumtile-144x144.png">
-    <meta name="msapplication-TileColor" content="#005eb8">
-    <meta name="msapplication-square70x70logo" content="{{ baseUrl }}assets/smalltile-70x70.png">
-    <meta name="msapplication-square150x150logo" content="{{ baseUrl }}assets/mediumtile-150x150.png">
-    <meta name="msapplication-wide310x150logo" content="{{ baseUrl }}assets/favicons/widetile-310x150.png">
-    <meta name="msapplication-square310x310logo" content="{{ baseUrl }}assets/favicons/largetile-310x310.png">
+    {% block headIcons %}
+      <link rel="shortcut icon" href="{{ baseUrl }}assets/favicons/favicon.ico" type="image/x-icon">
+      <link rel="apple-touch-icon" href="{{ baseUrl }}assets/favicons/apple-touch-icon-180x180.png">
+      <link rel="mask-icon" href="{{ baseUrl }}assets/favicon.svg" color="#005eb8">
+      <link rel="icon" sizes="192x192" href="{{ baseUrl }}assets/favicon-192x192.png">
+      <meta name="msapplication-TileImage" content="{{ baseUrl }}assets/mediumtile-144x144.png">
+      <meta name="msapplication-TileColor" content="#005eb8">
+      <meta name="msapplication-square70x70logo" content="{{ baseUrl }}assets/smalltile-70x70.png">
+      <meta name="msapplication-square150x150logo" content="{{ baseUrl }}assets/mediumtile-150x150.png">
+      <meta name="msapplication-wide310x150logo" content="{{ baseUrl }}assets/favicons/widetile-310x150.png">
+      <meta name="msapplication-square310x310logo" content="{{ baseUrl }}assets/favicons/largetile-310x310.png">
+    {% endblock %}
+
+    {% block head %}{% endblock %}
 
     <meta property="og:url" content="https://nhsuk.github.io/nhsuk-frontend/">
     <meta property="og:title" content="NHS.UK frontend library">
@@ -46,11 +50,14 @@
 
   <body class="{{ body_class }}">
     <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+    {% block bodyStart %}{% endblock %}
 
-      {% block header %}{% endblock %}
+    {% block header %}{% endblock %}
 
-      {% block body %}{% endblock %}
+    {% block body %}{% endblock %}
 
-      {% block footer %}{% endblock %}
+    {% block footer %}{% endblock %}
+
+    {% block bodyEnd %}{% endblock %}
   </body>
 </html>

app/_templates/page.njk

@@ -38,11 +38,8 @@
   }) }}
 
   {{ header({
-    "showNav": "false",
-    "showSearch": "false",
     "homeHref": baseUrl
-    })
-  }}
+  }) }}
 {% endblock %}
 
 

app/components/all.njk

@@ -36,28 +36,27 @@
   }) }}
 
   {{ header({
-      "showNav": "true",
-      "showSearch": "true",
+      "search": true,
       "primaryLinks": [
         {
-          "url"  : "https://www.nhs.uk/conditions",
-          "label" : "Health A-Z"
+          href: "https://www.nhs.uk/conditions",
+          text: "Health A-Z"
         },
         {
-          'url' : 'https://www.nhs.uk/live-well/',
-          'label' : 'Live Well'
+          href: 'https://www.nhs.uk/live-well/',
+          text: 'Live Well'
         },
         {
-          'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
-          'label' : 'Care and support'
+          href: 'https://www.nhs.uk/conditions/social-care-and-support/',
+          text: 'Care and support'
         },
         {
-          'url'  : 'https://www.nhs.uk/news/',
-          'label' : 'Health news'
+          href: 'https://www.nhs.uk/news/',
+          text: 'Health news'
         },
         {
-          'url' : 'https://www.nhs.uk/service-search',
-          'label' : 'Services near you'
+          href: 'https://www.nhs.uk/service-search',
+          text: 'Services near you'
         }
       ]
     })

app/components/header/header-account-custom-html.njk

@@ -0,0 +1,46 @@
+{% set html_style = "background-color: #f0f4f5;" %}
+{% set title = "Header with account (logged in, custom html)" %}
+{% from "components/header/macro.njk" import header %}
+{% extends "layout.njk" %}
+
+{% block head %}
+  <style>
+    .app-count {
+      align-self: center;
+      align-items: center;
+      background-color: #d5281b;
+      border-radius: 1em;
+      color: #fff;
+      font-size: 14px;
+      height: 1.5em;
+      line-height: 1.5em;
+      min-width: 1.5em;
+      padding: 0.25em;
+      display: inline-flex;
+      justify-content: center;
+    }
+  </style>
+{% endblock %}
+
+{% block body %}
+  {{ header({
+    account: {
+      items: [
+        {
+          href: "#",
+          text: "Check your profile"
+        },
+        {
+          html: '<a class="nhsuk-header__account-link" href="#">Notifications</a> <span class="app-count">8</span>'
+        },
+        {
+          href: "#",
+          text: "Log out"
+        }
+      ]
+    },
+    service: {
+      name: "Profile manager"
+    }
+  }) }}
+{% endblock %}

app/components/header/header-account-logged-in.njk

@@ -0,0 +1,46 @@
+{% set html_style = "background-color: #f0f4f5;" %}
+{% set title = "Header with account (logged in)" %}
+{% from "components/header/macro.njk" import header %}
+{% extends "layout.njk" %}
+
+{% block body %}
+  {{ header({
+    service: {
+      name: "Manage patients"
+    },
+    account: {
+      items: [
+        {
+          href: "#",
+          text: "[email protected]",
+          icon: true
+        },
+        {
+          href: "#",
+          text: "Log out"
+        }
+      ]
+    },
+    primaryLinks: [
+      {
+        href: "#",
+        text: "Home"
+      },
+      {
+        href: "#",
+        text: "Services"
+      },
+      {
+        href: "#",
+        text: "Your health"
+      },
+      {
+        href: "#",
+        text: "Messages"
+      }, {
+        href: "#",
+        text: "Help and support"
+      }
+    ]
+  }) }}
+{% endblock %}

app/components/header/header-account-logged-out.njk

@@ -0,0 +1,20 @@
+{% set html_style = "background-color: #f0f4f5;" %}
+{% set title = "Header with account (logged out)" %}
+{% from "components/header/macro.njk" import header %}
+{% extends "layout.njk" %}
+
+{% block body %}
+  {{ header({
+    service: {
+      name: "Manage patients"
+    },
+    account: {
+      items: [
+        {
+          href: "#",
+          text: "Log in"
+        }
+      ]
+    }
+  }) }}
+{% endblock %}

app/components/header/header-account-rbac.njk

@@ -0,0 +1,50 @@
+{% set html_style = "background-color: #f0f4f5;" %}
+{% set title = "Header with account (logged in, RBAC)" %}
+{% from "components/header/macro.njk" import header %}
+{% extends "layout.njk" %}
+
+{% block body %}
+  {{ header({
+    service: {
+      name: "Manage patients"
+    },
+    search: {
+      placeholder: "NHS number, Date of birth",
+      visuallyHiddenLabel: "Search for a user"
+    },
+    account: {
+      items: [
+        {
+          href: "#",
+          text: "Florence Nightingale",
+          icon: true
+        },
+        {
+          text: "RA Manager, Hull and East Yorkshire Hospitals NHS Trust (RWA)"
+        },
+        {
+          href: "#",
+          text: "Change role"
+        },
+        {
+          href: "#",
+          text: "Log out"
+        }
+      ]
+    },
+    primaryLinks: [
+      {
+        href: "#",
+        text: "Home"
+      },
+      {
+        href: "#",
+        text: "Create user"
+      },
+      {
+        href: "#",
+        text: "Find user"
+      }
+    ]
+  }) }}
+{% endblock %}

app/components/header/header-logo.njk

@@ -5,10 +5,6 @@
 
 {% block body %}
 
-  {{ header({
-      "showNav": "false",
-      "showSearch": "false"
-    })
-  }}
+  {{ header() }}
 
 {% endblock %}

app/components/header/header-navigation.njk

@@ -6,36 +6,31 @@
 {% block body %}
 
   {{ header({
-      "showNav": "true",
-      "showSearch": "false",
-      "primaryLinks": [
+      primaryLinks: [
         {
-          "url"  : "https://www.nhs.uk/conditions",
-          "label" : "Health A-Z",
-          "classes": "app-header__navigation-item--current",
-          "attributes": {
-            "aria-current": "true"
-          }
+          href: "#",
+          text: "Health A-Z"
         },
         {
-          'url' : 'https://www.nhs.uk/live-well/',
-          'label' : 'Live Well'
+          href: "#",
+          text: "Live Well"
         },
         {
-          'url' : 'https://www.nhs.uk/mental-health/',
-          'label' : 'Mental health'
+          href: "#",
+          text: "Mental health"
         },
         {
-          'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
-          'label' : 'Care and support'
+          href: "#",
+          text: "Care and support",
+          active: true
         },
         {
-          'url'  : 'https://www.nhs.uk/pregnancy/',
-          'label' : 'Pregnancy'
+          href: "#",
+          text: "Pregnancy"
         },
         {
-          'url' : 'https://www.nhs.uk/nhs-services/',
-          'label' : 'NHS services'
+          href: "#",
+          text: "NHS services"
         }
       ]
     })