govuk-one-login / service-header

A header for services using GOV.UK One Login
https://govuk-one-login.github.io/service-header/
6 stars 4 forks source link

Update way active link is set in njk #11

Closed danacotoran closed 1 year ago

danacotoran commented 1 year ago

Set active link based on a separate parameter as opposed to as part of the navigation links array.

How to set navigation links and active link (before)

{% set navigationItems = [
  {
    active: true,
    href: "#",
    text: 'Example link 1'
  },{
    href: "#",
    text: 'Example link 2'
  },{
    href: "#",
    text: 'Example link 3'
  }]
%}

You had to re-set navigationItems every time you want to set a different "active" state from the default.

How to set navigation links and active link (after)

Set up navigation items in the main layout template. Navigation items must have a unique id, and be in the order you would like them to be displayed.

{% set navigationItems = [
  {
    href: "#",
    text: 'Example link 1',
    id: 'id1'
  },{
    href: "#",
    text: 'Example link 2',
    id: 'id2'
  },{
    href: "#",
    text: 'Example link 3',
    id: 'id3'
  }]
%}

To set the "active" link on individual pages, use the following syntax, where activeLinkId is the unique identifier for each link in the navigationItems array.

{% set activeLinkId = "id3" %}

https://govukverify.atlassian.net/browse/GUA-889