Add primaryLinks classes and attributes support

nhsuk · Jul 5, 2024 · 026d583 · 026d583
1 parent a3c91f6
commit 026d583
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/app/components/header/header-navigation.njk b/app/components/header/header-navigation.njk
@@ -11,7 +11,11 @@
       "primaryLinks": [
         {
           "url"  : "https://www.nhs.uk/conditions",
-          "label" : "Health A-Z"
+          "label" : "Health A-Z",
+          "classes": "app-header__navigation-item--current",
+          "attributes": {
+            "aria-current": "true"
+          }
         },
         {
           'url' : 'https://www.nhs.uk/live-well/',

diff --git a/packages/components/header/README.md b/packages/components/header/README.md
@@ -784,6 +784,8 @@ The header Nunjucks macro takes the following arguments:
 | **primaryLinks**            | array   | No       | Array of navigation links for use in the header.                                                                                                  |
 | **primaryLinks[].url**      | string  | No       | The href of a navigation item in the header.                                                                                                      |
 | **primaryLinks[].label**    | string  | No       | The label of a navigation item in the header.                                                                                                     |
+| **primaryLinks[].classes**  | string  | No       | Optional additional classes to add to the list item.                                                                                              |
+| **primaryLinks[].attributes**  | string  | No    | Any extra HTML attributes (for example data attributes) to add to the list item.                                                                  |
 | **transactional**           | string  | No       | Set to "true" if this is a transactional header (with smaller logo).                                                                              |
 | **transactionalService**    | object  | No       | Object containing the _name_ and _href_ of the transactional service.                                                                             |
 | **service**                 | object  | No       | Object containing the _name_ and optional boolean _longName_ of the service. Set this to "true" if the service name is longer than 22 characters. |

diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
@@ -81,6 +81,7 @@
         <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">
+          <li class="nhsuk-header__navigation-item {%- if item.classes %} {{ classes }}{% endif %}" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
             <a class="nhsuk-header__navigation-link"  href="{{item.url}}">
               {{item.label}}
             </a>
@@ -139,6 +140,7 @@
         <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">
+          <li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
             <a class="nhsuk-header__navigation-link"  href="{{item.url}}">
               {{item.label}}
             </a>