Skip to content

Directory subnav polishes and wider rollout#15310

Open
frederickobrien wants to merge 1 commit intomainfrom
directory-nav-polishes
Open

Directory subnav polishes and wider rollout#15310
frederickobrien wants to merge 1 commit intomainfrom
directory-nav-polishes

Conversation

@frederickobrien
Copy link
Contributor

@frederickobrien frederickobrien commented Feb 6, 2026

This makes a few adjustments to the directory subnav component. It gets the 'selected' styling working (I've tried inferring it from pageIds rather than doing the work outside the component to pass in as a 'selected' prop.

With a nod from sport I've also added the ability to render the bar based on tag, as I think there's a keenness to have this appear on all 2026 Winter Olympics pages.

image

More to iterate on here but have run locally and seems to work nicely.

@frederickobrien frederickobrien self-assigned this Feb 6, 2026
@frederickobrien frederickobrien added maintenance Departmental tracking: maintenance work, not a fix or a feature feature Departmental tracking: work on a new feature and removed maintenance Departmental tracking: maintenance work, not a fix or a feature labels Feb 6, 2026
@frederickobrien frederickobrien added this to the Visuals milestone Feb 6, 2026
@frederickobrien frederickobrien changed the title Directory subnav. polishes Directory subnav polishes and wider rollout Feb 6, 2026
@github-actions
Copy link

github-actions bot commented Feb 6, 2026

@frederickobrien frederickobrien requested a review from a team February 6, 2026 10:28
@frederickobrien frederickobrien marked this pull request as ready for review February 6, 2026 10:28
@github-actions
Copy link

github-actions bot commented Feb 6, 2026

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

>
<a
href={link.href}
href={`/${link.id}`}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is pageId a sound way of linking internally? It seemed to work locally but wanted to double check.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Worth discussing with @JustinPinner the differences between this vs webURL vs canonicalUrl?

This id is being set by you here in this file, in the config object? So it's a predefined list of paths that you've tested, as opposed to something coming in dynamically from upstream data?

Copy link
Contributor Author

@frederickobrien frederickobrien Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Exactly yeah, so we can easily change it to something else if it's more appropriate. I'm currently using the pageId value of each page.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have spoken with @JustinPinner about this @JamieB-gu and it seems pageId is the way to go: "the content's ID is the most stable CAPI reference you could use"

Copy link
Contributor

@JamieB-gu JamieB-gu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, just that point you've raised about links to discuss.

@frederickobrien frederickobrien added the run_chromatic Runs chromatic when label is applied label Feb 6, 2026
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Feb 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature Departmental tracking: work on a new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants