Check what the states of a navigation item look like currently

[CharlotteDowns]

What

Check what the active state of a navigation item looks like currently.

Identify what the navigation item looks like if there:

• is no href (link)
• is a active: true state
• is a current: true state

Why

In order to determine when to suggest applying different visual styles to the navigation item.

Done when

• all states have been recognised
• design suggestions made

[CharlotteDowns]

In the Nunjucks of the navigation we can set different aria-current values.

Current

current: true sets aria-current="page" and indicates that the user is on that specific page.

How this affects the styling of the navigation item

A blue border bottom is added to the navigation item which has the state applied.

Active

active: true sets aria-current="true" and indicates that the user is on a child page of that section.

How this affects the styling of the navigation item

A blue border bottom is added to the navigation item which has the state applied.

In the Nunjucks we can also remove the href: 'link to thing'

No href

In some cases Design System users may wish to remove the ability for a navigation link to be selected when it is active or current

How this affects the styling of the navigation item

Removing the href no longer makes the text a link and therefore the text returns to standard body styling, font-weight 400 and color: #0b0c0c.

[CharlotteDowns]

Design Suggestion for an unlinked active state

I'm wondering if we can add a conditional style for .govuk-service-header__navigation-item--active when there is no hrefto change the border bottom to a border-color of #0b0c0c.

cc: @querkmachine

[CharlotteDowns]

We also have an explanation of the matrix of all the different paramaters in Add conditional styles for different active states of the navigation items which builds on top of the findings in this issue.