'Flat' implementation of the service navigation component #4668

querkmachine · 2025-05-08T17:06:25Z

Implements the service navigation component, but in a 'flat' manner that doesn't try to reproduce the bespoke accordion functionality.

Changes

Implemented the service navigation component in place of the website's main navigation.
Removed CSS and JS for the old navigation.
Adjusted some styles for the logo and search box on mobile viewports so they can use the full width available to them, now the mobile menu toggle has moved.

Thoughts

Rather than change how navigation items are named internally, I've made it so that a new object with renamed keys is assembled directly prior to calling the service navigation Nunjucks macro. Reworking the internals is part of #4367, though doing this assembly might be necessary to set the active styles for links, regardless.

netlify · 2025-05-08T17:07:42Z

✅ You can preview this change here:

Name	Link
🔨 Latest commit	`c2d2682`
🔍 Latest deploy log	https://app.netlify.com/projects/govuk-design-system-preview/deploys/68398e4ab01da20008d05008
😎 Deploy Preview	https://deploy-preview-4668--govuk-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

romaricpascal · 2025-05-09T15:12:42Z

That's pretty neat! These breadcrumbs work really nicely for navigating up the page hierarchy. 🙌🏻

Navigating down the page hierarchy requires to scroll down the page to the list of sub pages, though, which can be quite far, like on the Community page. We'll likely want to have a think on how to make it easier to access these pages if we want to drop the accordion. (Random though, could we have a second Service Navigation for the sub pages on mobile?)

On the topic of building the structure for the breadcrumbs, thinking it could help if we'd associate a parent page to each page (all the way up to Home). That'd make the traversal much simpler (read a series of parent page until reaching the Home) as well as give a clearer indication that we reached the home than the lack of permalink (there'd be no parent).

romaricpascal · 2025-05-09T15:47:18Z

Associating a parent is a fairly common problem and https://github.com/tests-always-included/metalsmith-ancestry might helps sort us out if necessary

querkmachine · 2025-05-09T17:51:38Z

@romaricpascal I did start by adding an ancestors key to items in the navigation object that contained an array of parent pages.

I found it harder to make that work, however, as the template doesn't know which item within navigation the current page is (just the current page's permalink), so it still required traversing the navigation object and it's nested arrays to find the right object to access the ancestors key. At that point it seemed simpler to assemble the ancestors array in the traversal code itself, rather than defining it at the same time as the navigation object.

There might be (probably is?) some way of accessing the item or ancestors from within the template context, but this technique seemed to suffice for the purposes of a spike.

mia-allers-gds · 2025-05-14T12:36:13Z

This looks good, couple of things:

On Chrome the desktop version of the service nav is around 70px, which I think deviates from the original component height (unless I'm missing something)
On desktop, the breadcrumb pushes the side menu and also the page content down quite a lot, there is a large gap at the top of the page (see screenshot)
I wonder if the breadcrumb should 'belong' to the page content area, instead of sitting in line with the side nav. That would then make the order of the page go Main menu > side menu > page with breadcrumb

Design system website page showing that the breadcrumb pushes the page content down significantly

mia-allers-gds · 2025-05-14T12:48:15Z

Here is what the breadcrumb would look like if moved to within the main body of the content:

Remove theme from page titles, except for those on patterns, so that they don't duplicate the last item in the breadcrumbs.

romaricpascal · 2025-05-20T16:30:24Z

Don't think we can do much as it's down to the amount of items we have in the navigation, but it's worth noting that the items in the Service Navigation relfow on a second line when the viewport is between 641px and 728px:

Screenshot of the Service Navigation on the Design System site with one item reflowing to the next line

That's probably more something to solve for the Service Navigation component itself by allowing to customise the breakpoint at which the navigation turns into a mobile menu 😊

mia-allers-gds

All looks good to me! (Breadcrumb stuff is another PR, right? That still needs some working out)

romaricpascal · 2025-05-27T11:55:38Z

src/stylesheets/main.scss

+.app-width-container,
+.govuk-service-navigation .govuk-width-container {


suggestion We may want to open an issue/PR to investigate if we could customise $govuk-page-width so that we don't have a custom selector. This feels like its own piece of work, though, so happy to ship this 😊

I'm reasonably confident that's an option since ac2cbdf as the examples no longer include the wider Design System CSS.

But agree we can do it later rather than as part of this PR.

The fact that we needed to apply padding to both `app-breadcrumbs` and `app-content` was a sign that the padding was not applied to the right elements and should instead be applied to their parent. This means that whatever gets added inside `app-side-pane__content`, the right amount of space will surround it.

Make the spacing on single page layouts consistent with the spacing on the side page pages. This includes moving the `app-width-container` outside of `<main>` so that the horizontal spacing is more easily applied to both the breadcrumbs and `<main>`

romaricpascal · 2025-05-27T17:58:16Z

As the Service Navigation is the first component we use on the Design System site, we're now running into the issue that Safari 11.1 does not support the decimal rgb value that newer versions of Sass output, leading to a black border for the active item rather than a blue one (as shown on the following screenshot, where I duplicated the border-color property to show that Safari is not understanding it).

Screenshot of a browser inspector highlighting the active element of the Service Nav and its CSS properties, with `border-color` showing a warning

Users still get the information, so I'd be keen to not block the merging of this PR as the issue with decimal rgb values requires deeper investigation in govuk-frontend to decide on how we should address the lack of support from Safari for the output of govuk-shade and govuk-tintwhen compiled with Dart Sass > 1.79.

36degrees

LGTM, nice work cleaning everything up 👍🏻

36degrees · 2025-05-28T08:05:53Z

src/stylesheets/components/_header.scss

+
+  // Override the right padding normally used to reserve space for the
+  // mobile menu toggle.
+  padding-right: 0;


We can get rid of this once we update to 5.10.2, right?

Yup, I think that's the padding being removed in 5.10.2. This PR will likely get merged after we update the site to 5.10.2 so we should remove this from the PR before we merge 😊

Moves the vertical padding in the white area where the content is displayed to a `app-main-wrapper` class. This ensures the spacing is consistent between `layout-pane` and `layout-single-page` so the breadcrumbs end up at the same level on all pages. The padding is applied as its own class in a similar fashion that we have `govuk-main-wrapper` in GOV.UK Frontend, but is made to match the spacing designed for the `layout-pane`. It also fixes the bottom padding having disappeared after the content on the pages using `layout-single-page`.

Ports the code of #4368 for the rendering of the subnavigation of each item of the Service Nav in a `<template>` element which will then be used by JavaScript. Co-Authored-By: [email protected]

Instantiate one component per section of the navigation to easily group the toggle button and subnavigation it reveals Co-Authored-By: [email protected]

As the mobile navigation is only available when JavaScript is loaded, and gets shown/hidden through the `hidden` HTML attribute, styles do not need to be gated by a media query. As the links live withing the Service Navigation, we can reuse its `govuk-service-navigation__link` styles for the interactive elements (subnavigation toggle and links) Co-Authored-By: [email protected]

Include the fix that makes `<template>` tags correctly handled by `element-permitted-content`. https://gitlab.com/html-validate/html-validate/-/issues/305

As of GOV.UK Frontend v5.10.2 [1] the logo in the header only has padding applied to the right if the menu button is present. As discussed in #4668 [2], this means that we can now remove this override from the Design System code. [1]: https://github.com/alphagov/govuk-frontend/releases/tag/v5.10.2 [2]: #4668 (comment)

querkmachine added 2 commits May 8, 2025 16:20

Implement service navigation

453675d

Delete legacy navigation code

2036046

querkmachine self-assigned this May 8, 2025

querkmachine changed the title ~~[SPIKE] 'Flat' implementation of the service navigation~~ [SPIKE] 'Flat' implementation of the service navigation component May 8, 2025

Fix service navigation width

75b8057

querkmachine force-pushed the spike-flat-mobile-nav branch from e2f34ae to a7a209e Compare May 9, 2025 11:37

mia-allers-gds mentioned this pull request May 9, 2025

Investigate what needs improving with mobile navigation #4640

Closed

9 tasks

querkmachine requested review from hazalarpalikli and mia-allers-gds May 13, 2025 15:11

Style adjustments for the removal of header menu toggle

74d268d

querkmachine force-pushed the spike-flat-mobile-nav branch from a7a209e to 74d268d Compare May 16, 2025 07:43

querkmachine added 3 commits May 16, 2025 08:54

Implement breadcrumbs

20a0caa

Move breadcrumbs to above page title

bef66aa

Remove theme from page titles

7dc3f2a

Remove theme from page titles, except for those on patterns, so that they don't duplicate the last item in the breadcrumbs.

mia-allers-gds approved these changes May 22, 2025

View reviewed changes

hazalarpalikli approved these changes May 22, 2025

View reviewed changes

querkmachine and others added 2 commits May 23, 2025 13:46

Add breadcrumbs to all layouts

d20f34c

Align first subnav heading baseline with breadcrumbs'

e789972

romaricpascal changed the title ~~[SPIKE] 'Flat' implementation of the service navigation component~~ 'Flat' implementation of the service navigation component May 27, 2025

romaricpascal reviewed May 27, 2025

View reviewed changes

romaricpascal marked this pull request as ready for review May 27, 2025 11:56

romaricpascal added 2 commits May 27, 2025 15:01

36degrees approved these changes May 28, 2025

View reviewed changes

hazalarpalikli mentioned this pull request May 28, 2025

Implement Service Navigation in the Design System site #4655

Closed

2 tasks

romaricpascal mentioned this pull request May 30, 2025

Implement accordion for mobile navigation #4701

Merged

romaricpascal added 7 commits May 30, 2025 11:06

Render subnavigation in a <template> for mobile

05b4487

Ports the code of #4368 for the rendering of the subnavigation of each item of the Service Nav in a `<template>` element which will then be used by JavaScript. Co-Authored-By: [email protected]

Add JavaScript behaviour to accordion sections in the mobile menu

143129b

Instantiate one component per section of the navigation to easily group the toggle button and subnavigation it reveals Co-Authored-By: [email protected]

Update html-validate

9dbcff5

Include the fix that makes `<template>` tags correctly handled by `element-permitted-content`. https://gitlab.com/html-validate/html-validate/-/issues/305

Merge pull request #4701 from alphagov/service-nav-accordion

58b2e8b

Merge pull request #4710 from alphagov/spike-breadcrumbs-all-pages

c2d2682

romaricpascal requested a review from a team as a code owner May 30, 2025 10:54

romaricpascal merged commit 8177f27 into main May 30, 2025
16 checks passed

romaricpascal deleted the spike-flat-mobile-nav branch May 30, 2025 11:11

36degrees mentioned this pull request Jun 2, 2025

Remove padding override for logo #4728

Merged

		.app-width-container,
		.govuk-service-navigation .govuk-width-container {

'Flat' implementation of the service navigation component #4668

'Flat' implementation of the service navigation component #4668

Uh oh!

Conversation

querkmachine commented May 8, 2025 • edited by romaricpascal Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Thoughts

Uh oh!

netlify bot commented May 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ You can preview this change here:

Uh oh!

romaricpascal commented May 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

romaricpascal commented May 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

querkmachine commented May 9, 2025

Uh oh!

mia-allers-gds commented May 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mia-allers-gds commented May 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

romaricpascal commented May 20, 2025

Uh oh!

mia-allers-gds left a comment

Choose a reason for hiding this comment

Uh oh!

romaricpascal May 27, 2025

Choose a reason for hiding this comment

Uh oh!

36degrees May 28, 2025

Choose a reason for hiding this comment

Uh oh!

romaricpascal commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

36degrees left a comment

Choose a reason for hiding this comment

Uh oh!

36degrees May 28, 2025

Choose a reason for hiding this comment

Uh oh!

romaricpascal May 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

querkmachine commented May 8, 2025 •

edited by romaricpascal

Loading

netlify bot commented May 8, 2025 •

edited

Loading

romaricpascal commented May 9, 2025 •

edited

Loading

romaricpascal commented May 9, 2025 •

edited

Loading

mia-allers-gds commented May 14, 2025 •

edited

Loading

mia-allers-gds commented May 14, 2025 •

edited

Loading

romaricpascal commented May 27, 2025 •

edited

Loading