Skip to content

Commit

Permalink
Merge pull request #978 from nhsuk/support-classes-and-attributes-in-…
Browse files Browse the repository at this point in the history 
…header-primary-links

Support classes and attributes in header primary links
  • Loading branch information
@anandamaryon1
anandamaryon1 authored Jul 17, 2024
2 parents 65cacf0 + 3baa7e7 commit 17a4c06
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 24 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
- Make footer copyright statement configurable via Nunjucks parameters ([PR 975](https://github.com/nhsuk/nhsuk-frontend/pull/975))
- Remove unused nhsuk-u-top-and-bottom utility class ([PR 979](https://github.com/nhsuk/nhsuk-frontend/pull/979))
- Add warning button ([PR 976](https://github.com/nhsuk/nhsuk-frontend/pull/976))
- Add support for custom classes and attributes in Header primary links ([PR 978](https://github.com/nhsuk/nhsuk-frontend/pull/978))

## 8.2.0 - 12 June 2024

Expand Down
6 changes: 5 additions & 1 deletion app/components/header/header-navigation.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/',
Expand Down
44 changes: 23 additions & 21 deletions packages/components/header/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -770,26 +770,28 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen

The header Nunjucks macro takes the following arguments:

| Name | Type | Required | Description |
| --------------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| **showNav** | boolean | Yes | Set to "true" to show the navigation links in the header. |
| **showSearch** | boolean | Yes | Set to "true" to show the site search input form. |
| **homeHref** | string | No | The href of the link for the logo and mobile home link in the navigation links. Defaults to "/". |
| **ariaLabel** | string | No | Aria label for the logo href. Defaults to "NHS homepage". |
| **organisation** | object | No | Settings for header with organisational logo. |
| **organisation.name** | string | No | Organisation name value. |
| **organisation.split** | string | No | Longer organisation names can be split onto multiple lines. |
| **organisation.descriptor** | string | No | Organisation descriptor. |
| **organisation.logoURL** | string | No | Organisation logo if using a static asset, such as PNG, is preferred. |
| **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. |
| **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. |
| **classes** | string | No | Optional additional classes to add to the header container. Separate each class with a space. |
| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the header container. |
| **searchAction** | string | No | The search action endpoint. Defaults to "https://www.nhs.uk/search/" |
| **searchInputName** | string | No | The name for the search field. Defaults to "q" |
| Name | Type | Required | Description |
| ----------------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| **showNav** | boolean | Yes | Set to "true" to show the navigation links in the header. |
| **showSearch** | boolean | Yes | Set to "true" to show the site search input form. |
| **homeHref** | string | No | The href of the link for the logo and mobile home link in the navigation links. Defaults to "/". |
| **ariaLabel** | string | No | Aria label for the logo href. Defaults to "NHS homepage". |
| **organisation** | object | No | Settings for header with organisational logo. |
| **organisation.name** | string | No | Organisation name value. |
| **organisation.split** | string | No | Longer organisation names can be split onto multiple lines. |
| **organisation.descriptor** | string | No | Organisation descriptor. |
| **organisation.logoURL** | string | No | Organisation logo if using a static asset, such as PNG, is preferred. |
| **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. |
| **classes** | string | No | Optional additional classes to add to the header container. Separate each class with a space. |
| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the header container. |
| **searchAction** | string | No | The search action endpoint. Defaults to "https://www.nhs.uk/search/" |
| **searchInputName** | string | No | The name for the search field. Defaults to "q" |

If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).
4 changes: 2 additions & 2 deletions packages/components/header/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
<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">
<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>
Expand Down Expand Up @@ -138,7 +138,7 @@
<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">
<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>
Expand Down

0 comments on commit 17a4c06

Please sign in to comment.