diff --git a/CHANGELOG.md b/CHANGELOG.md index 874ad8b668..238daad562 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,11 @@ # NHS.UK frontend Changelog - + ## Unreleased +:new: **New features** + +- The primary navigation in the header now lets you show which item is the current section or page. ([PR 1067](https://github.com/nhsuk/nhsuk-frontend/pull/1067)) + :wrench: **Fixes** - Fix appearance of disabled warning buttons ([Issue 1034]([https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/1034])) diff --git a/app/components/header/header-navigation.njk b/app/components/header/header-navigation.njk index 3ad96e0ff8..7ae652faf9 100644 --- a/app/components/header/header-navigation.njk +++ b/app/components/header/header-navigation.njk @@ -8,12 +8,8 @@ {{ header({ "primaryLinks": [ { - "url" : "https://www.nhs.uk/conditions", - "label" : "Health A-Z", - "classes": "app-header__navigation-item--current", - "attributes": { - "aria-current": "true" - } + href: "https://www.nhs.uk/conditions", + text: "Health A-Z" }, { href: 'https://www.nhs.uk/live-well/', @@ -25,7 +21,8 @@ }, { href: 'https://www.nhs.uk/conditions/social-care-and-support/', - text: 'Care and support' + text: 'Care and support', + active: true }, { href: 'https://www.nhs.uk/pregnancy/', diff --git a/app/components/header/header-org-white-nav.njk b/app/components/header/header-org-white-nav.njk index 046a3164eb..5c2bbfdb8a 100644 --- a/app/components/header/header-org-white-nav.njk +++ b/app/components/header/header-org-white-nav.njk @@ -19,7 +19,8 @@ }, { href: '#', - text: 'Wards and departments' + text: 'Wards and departments', + active: true }, { href: '#', diff --git a/app/components/header/header-org-white.njk b/app/components/header/header-org-white.njk index 088e1bc2e8..941f2daeae 100644 --- a/app/components/header/header-org-white.njk +++ b/app/components/header/header-org-white.njk @@ -19,7 +19,8 @@ }, { href: '#', - text: 'Wards and departments' + text: 'Wards and departments', + active: true }, { href: '#', diff --git a/app/components/header/header-service-name-with-nav.njk b/app/components/header/header-service-name-with-nav.njk index 2ea9735a5b..2836ff0abd 100644 --- a/app/components/header/header-service-name-with-nav.njk +++ b/app/components/header/header-service-name-with-nav.njk @@ -19,7 +19,8 @@ }, { href: '#', - text: 'Design system' + text: 'Design system', + current: true }, { 'url' : '#', diff --git a/app/components/header/index.njk b/app/components/header/index.njk index 8e2a35d73c..4f57742474 100644 --- a/app/components/header/index.njk +++ b/app/components/header/index.njk @@ -9,6 +9,7 @@ "search": true, "primaryLinks": [ { + href: "https://www.nhs.uk/conditions", text: "Health A-Z" }, diff --git a/packages/components/header/_header-white.scss b/packages/components/header/_header-white.scss index 725952711b..736ebd0c8f 100644 --- a/packages/components/header/_header-white.scss +++ b/packages/components/header/_header-white.scss @@ -81,5 +81,28 @@ .nhsuk-header__navigation-link { @include nhsuk-link-style-no-visited-state; + + // Visual indicator for current navigation item has blue line on + // bottom edge instead of grey in the regular Header nav + &[aria-current="page"], + &[aria-current="true"] { + box-shadow: inset 0 ($nhsuk-focus-width * -1) $color_nhsuk-blue; + } + + &:focus { + box-shadow: inset 0 ($nhsuk-focus-width * -1) $color_nhsuk-black; + } + } + + // Drop down navigation + .nhsuk-header__drop-down { + .nhsuk-header__navigation-link { + // When in expanded menu, a current item link should revert to having a + // no box-shadow, with a box-shadow added to containing list item instead. + &[aria-current="page"], + &[aria-current="true"] { + box-shadow: none; + } + } } } diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss index 77b8cfd2f5..4d00db5142 100644 --- a/packages/components/header/_header.scss +++ b/packages/components/header/_header.scss @@ -220,6 +220,13 @@ margin-bottom: 0; } +// This is a element used as a fallback mechanism for visually +// indicating current page in scenarios where CSS isn’t available. +// We don’t actually want it to be bold normally, so inherit parent font-weight. +.nhsuk-header__navigation-item-active-fallback { + font-weight: inherit; +} + .nhsuk-header__navigation-link { @include nhsuk-font(16); @include nhsuk-link-style-header; @@ -228,6 +235,14 @@ padding: nhsuk-spacing(3) 2px; white-space: nowrap; + // Visual indicator for current navigation item has grey line on bottom edge, + // and no underline on the link. + &[aria-current="page"], + &[aria-current="true"] { + text-decoration: none; + box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-border-color; + } + &:focus { box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-focus-text-color; } @@ -277,11 +292,34 @@ .nhsuk-header__navigation-link { @include govuk-width-container; @include nhsuk-link-style-no-visited-state; + padding: 12px 0; + + // When in expanded menu, a current item link should revert to having a + // no box-shadow, with a box-shadow added to containing list item instead. + &[aria-current="page"], + &[aria-current="true"] { + box-shadow: none; + } + + // But when focused the black line at the bottom should return, + // again using box-shadow. + &:focus { + box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-focus-text-color; + } } .nhsuk-header__navigation-item { border-top: 1px solid $color_nhsuk-grey-5; } + + // Current item within expended mobile menu gets blue line on left edge. + // + // The blue line uses an inset box-shadow instead of a border, as there’s + // already a grey border on the top, and using 2 different colour borders + // creates an awkward diagonal line where they meet. + .nhsuk-header__navigation-item--current { + box-shadow: inset 6px 0 $color_nhsuk-blue; + } } .nhsuk-header__drop-down--hidden { diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk index adcbd0e8bb..e673727ddf 100644 --- a/packages/components/header/template.njk +++ b/packages/components/header/template.njk @@ -70,8 +70,20 @@