diff --git a/CHANGELOG.md b/CHANGELOG.md index 714ed7bee7..61c3e45fa8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,28 @@ This was added in [pull request #1925: Generate fixtures.json files for componen This was added in [pull request #1918: Add new brand colour for FCDO](https://github.com/alphagov/govuk-frontend/pull/1918). +#### Render header navigation item without a link + +You can now render navigation items using the header macro without wrapping them in a link. + +You can do this by setting `text` or `html` and not setting `href`. + +For example: + +```javascript +{{ govukHeader({ + navigation: [ + { + html: '
+ +
' + } + ] +}) }} +``` + +This was added in [pull request # 1921: Make it possible to exclude link from header navigation item](https://github.com/alphagov/govuk-frontend/pull/1921). + #### Set navigation and mobile menu labels of the header with new options You can now customise the `aria-label` attributes of the navigation and mobile menu of the header component using the new `navigationLabel` and `menuButtonLabel` options. diff --git a/src/govuk/components/header/header.yaml b/src/govuk/components/header/header.yaml index 4cb7c2c87e..b33e97e223 100644 --- a/src/govuk/components/header/header.yaml +++ b/src/govuk/components/header/header.yaml @@ -35,7 +35,7 @@ params: - name: href type: string required: false - description: Url of the navigation item anchor. Both `href` and `text` attributes for navigation items need to be provided to create an item. + description: Url of the navigation item anchor. - name: active type: boolean required: false @@ -233,6 +233,15 @@ examples: - href: '#3' html: Navigation item 3 +- name: navigation item with text without link + data: + serviceName: Service Name + serviceUrl: '/components/header' + navigation: + - text: Navigation item 1 + - text: Navigation item 2 + - text: Navigation item 3 + # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: attributes hidden: true @@ -257,3 +266,26 @@ examples: attributes: data-attribute: my-attribute data-attribute-2: my-attribute-2 +- name: navigation item with html as text + hidden: true + data: + serviceName: Service Name + serviceUrl: '/components/header' + navigation: + - href: '#1' + text: Navigation item 1 + active: true + - href: '#2' + text: Navigation item 2 + - href: '#3' + text: Navigation item 3 +- name: navigation item with html without link + hidden: true + data: + serviceName: Service Name + serviceUrl: '/components/header' + navigation: + - html: Navigation item 1 + active: true + - html: Navigation item 2 + - html: Navigation item 3 diff --git a/src/govuk/components/header/template.njk b/src/govuk/components/header/template.njk index 0b31f33948..f8494664f2 100644 --- a/src/govuk/components/header/template.njk +++ b/src/govuk/components/header/template.njk @@ -64,11 +64,15 @@