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 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)
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.
To set the "active" link on individual pages, use the following syntax, where
activeLinkId
is the unique identifier for each link in thenavigationItems
array.{% set activeLinkId = "id3" %}
https://govukverify.atlassian.net/browse/GUA-889