Add breadcrumbs to all layouts #4710
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Remove theme from page titles, except for those on patterns, so that they don't duplicate the last item in the breadcrumbs.
✅ You can preview this change here:
To edit notification comments on pull requests, go to your Netlify project configuration. |
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
force-pushed
the
spike-breadcrumbs-all-pages
branch
from
bf52b3a to
535e8ea
Compare
romaricpascal
changed the base branch from
spike-breadcrumbs
to
spike-flat-mobile-nav
|
Regarding Consistent Navigation, because the breadcrumbs are always in the same relative order, that is fine and passes WCAG. If the breadcrumbs being visually in a different spot could be a problem, either specifically for accessibility or generally for usability, I don't know. I think it makes logical sense to be where it is. But I don't know if it could confuse users. |
36degrees
approved these changes
May 30, 2025
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
36degrees
approved these changes
May 30, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR build on top of the commits from #4698 and implements breadcrumbs on all pages, not just the pages part of the main navigation.
Like in #4698, it:
getAncestorPages, which is used to generate the breadcrumb navigation.In addition, it tweaks the spacing so that:
Thoughts
After discussion with the squad, we'd prefer that the breadcrumbs are consistently present on every page rather than there on some page and sometimes missing (proposed by #4698). They're consistently positioned before the
<main>element in the following source order:The side-navigation (4) may be absent in some of the pages, but:
Visually, they'll be sometimes in the side pane, sometimes on the left of the page container, which is no different from the content. They're also consitently aligned and spaced with the page header. This makes us confident that we're not doing anything untowards regarding Consistent Navigation WCAG criterion. @selfthinker, it'd be great to get your confirmation on it, though 😊