Skip to content

[SPIKE] Restyle navigation to blend with header and masthead #4748

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: feature/rebrand
Choose a base branch
from

Conversation

querkmachine
Copy link
Member

@querkmachine querkmachine commented Jun 3, 2025

Restyles the navigation on the homepage to blend in with the redesigned header and masthead. Part of #4734.

Changes

  • Update to a preview branch of govuk-frontend, based on [WIP] Add inverse service navigation styles govuk-frontend#6015.
  • Add new styles to handle style changes to the accordion navigation that's bespoke to the Design System website.
  • Adds a global isHomepage function to determine if the current page is the site homepage.
    • Uses this function to determine if the inverse variant should be invoked or not.
    • Refactors breadcrumbs to use this function.

Thoughts

The isHomepage function uses similar logic that breadcrumbs were previously using, that is, expecting an empty string for the permalink context item (which, as far as I know, only the homepage has). There is probably a nicer way of doing this, like reading the path of the underlying file, but I'm not sure what metadata is available in the page context.

@querkmachine querkmachine self-assigned this Jun 3, 2025
Copy link

netlify bot commented Jun 3, 2025

You can preview this change here:

Name Link
🔨 Latest commit 3188223
🔍 Latest deploy log https://app.netlify.com/projects/govuk-design-system-preview/deploys/6842ccc3ee42a700081c71e0
😎 Deploy Preview https://deploy-preview-4748--govuk-design-system-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@querkmachine querkmachine force-pushed the inverse-service-navigation branch from 4aa3a7a to 89076c8 Compare June 6, 2025 11:07
@querkmachine querkmachine force-pushed the inverse-service-navigation branch from 89076c8 to 3188223 Compare June 6, 2025 11:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant