Skip to content

Header/Nav for 2026 world cup fronts#15714

Merged
Jakeii merged 20 commits into
mainfrom
world-cup-2026-nav
May 26, 2026
Merged

Header/Nav for 2026 world cup fronts#15714
Jakeii merged 20 commits into
mainfrom
world-cup-2026-nav

Conversation

@DanielCliftonGuardian
Copy link
Copy Markdown
Contributor

@DanielCliftonGuardian DanielCliftonGuardian commented Apr 15, 2026 •
edited by Jakeii
Loading

What does this change?

This PR adds the navigation configuration for the upcoming 2026 World Cup coverage to the DirectoryPageNav component. This will allow the special event navigation bar to render on the main World Cup index pages and relevant sub-pages and removes the main subnav.

It's behind a 0% test for the moment as several of the pages are not live yet.

Why?

Part of #15704

Screenshots

Screenshot 2026-05-21 at 13 58 27 Screenshot 2026-05-21 at 13 58 17

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 15, 2026 •
edited
Loading

Deploy build 27335 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@DanielCliftonGuardian DanielCliftonGuardian changed the title Nav for 2026 world cup Header Nav for 2026 world cup fronts May 12, 2026
@DanielCliftonGuardian DanielCliftonGuardian mentioned this pull request May 14, 2026
Closed
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 14, 2026 •
edited
Loading

Deploy build 1554 of dotcom:ab-testing to CODE

All deployment options

From guardian/actions-riff-raff.

@DanielCliftonGuardian DanielCliftonGuardian added the feature Departmental tracking: work on a new feature label May 15, 2026
@DanielCliftonGuardian DanielCliftonGuardian self-assigned this May 15, 2026
@DanielCliftonGuardian DanielCliftonGuardian added this to the World Cup 2026 milestone May 15, 2026
@DanielCliftonGuardian DanielCliftonGuardian changed the title Header Nav for 2026 world cup fronts Header/Nav for 2026 world cup fronts May 15, 2026
DanielCliftonGuardian and others added 5 commits May 15, 2026 16:36
@DanielCliftonGuardian
Remove subnav above header
aeb8670
@DanielCliftonGuardian
Remove subnav for world cup 2026 fixtures page
9371ea1
@DanielCliftonGuardian
Update SportDataPageLayout.tsx
20ccc93
@DanielCliftonGuardian
Update SportDataPageLayout.tsx
f5b4b52
@HarryFischer
Hf/tweak world cup nav (#15886)
9ea1500 
* update style to match new design and add image assets

* add wide images to old headers

* fix nav style and add mobLandscape and phablet image

* remove unused
@HarryFischer
Copy link
Copy Markdown
Contributor

HarryFischer commented May 19, 2026

image The header now looks like this

@HarryFischer HarryFischer mentioned this pull request May 19, 2026
Closed
@Jakeii Jakeii marked this pull request as ready for review May 20, 2026 14:39
@Jakeii Jakeii requested a review from a team as a code owner May 20, 2026 14:39
@Jakeii Jakeii requested a review from a team May 20, 2026 14:39
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 20, 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.

@Jakeii Jakeii added the run_chromatic Runs chromatic when label is applied label May 20, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label May 20, 2026
@Jakeii
Copy link
Copy Markdown
Member

Jakeii commented May 20, 2026

Chromatic is flagging that this affects the Winder olympics 2026 version of the header, is that desired?

@petternitter
Copy link
Copy Markdown

petternitter commented May 21, 2026

@Jakeii Do you know / can you see in what way it affects that header/nav? PVs to those articles / fronts where it's present is going to be pretty low at this point - but given the header/nav is still present and works we could either address any minor issues or see if CP are happy to remove the header/nav from those pages if it breaks the experience.

@Jakeii
Copy link
Copy Markdown
Member

Jakeii commented May 21, 2026

@Jakeii Do you know / can you see in what way it affects that header/nav? PVs to those articles / fronts where it's present is going to be pretty low at this point - but given the header/nav is still present and works we could either address any minor issues or see if CP are happy to remove the header/nav from those pages if it breaks the experience.

These are the changes:
Screenshot 2026-05-21 at 08 56 30
Screenshot 2026-05-21 at 08 56 20

@petternitter
Copy link
Copy Markdown

petternitter commented May 21, 2026

Thanks, @Jakeii. Assuming the links still work this looks all good!

@HarryFischer
Copy link
Copy Markdown
Contributor

HarryFischer commented May 21, 2026 •
edited
Loading

If easier, design are happy if the new link style comes into those previous headers too @Jakeii @petternitter

— just seen the screenshots, those look good!

@Jakeii
Copy link
Copy Markdown
Member

Jakeii commented May 21, 2026

Thanks @petternitter, @HarryFischer, that's good to hear! Also I've just noticed the active/selected nav item not quite working (bold), just fixing that now.

@Jakeii Jakeii force-pushed the world-cup-2026-nav branch from 76c2e79 to 01a1892 Compare May 21, 2026 08:24
@Jakeii Jakeii added the run_chromatic Runs chromatic when label is applied label May 21, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label May 21, 2026
@Jakeii Jakeii force-pushed the world-cup-2026-nav branch from 2186e16 to 4663e4a Compare May 21, 2026 12:58
@Jakeii Jakeii mentioned this pull request May 22, 2026
Merged
marjisound
marjisound approved these changes May 26, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@marjisound marjisound 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 left 2 small none-blocking questions

Comment thread dotcom-rendering/src/lib/worldCup2026.ts
'football/world-cup-2026/overview',
];

export const worldCupTagIds = [];
Copy link
Copy Markdown
Contributor

@marjisound marjisound May 26, 2026

Choose a reason for hiding this comment

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

Is this going to be used in the future changes?

Copy link
Copy Markdown
Member

@Jakeii Jakeii May 26, 2026

Choose a reason for hiding this comment

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

yep, used in the follow up article PR #15956

Comment thread dotcom-rendering/src/lib/worldCup2026.ts
@@ -0,0 +1,7 @@
export const worldCup2026PageIds = [
'football/world-cup-2026',
'football/world-cup-2026/fixtures',
Copy link
Copy Markdown
Contributor

@marjisound marjisound May 26, 2026

Choose a reason for hiding this comment

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

Are we not going to add the nav for results page /football/world-cup-2026/results?

Copy link
Copy Markdown
Member

@Jakeii Jakeii May 26, 2026

Choose a reason for hiding this comment

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

Good question! @petternitter do you know?

But will merge now and can add if needed

@Jakeii Jakeii added the run_chromatic Runs chromatic when label is applied label May 26, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label May 26, 2026
@Jakeii Jakeii merged commit 1800f5a into main May 26, 2026
36 checks passed
@Jakeii Jakeii deleted the world-cup-2026-nav branch May 26, 2026 14:49
@gu-prout
Copy link
Copy Markdown

gu-prout Bot commented May 26, 2026

Seen on PROD (created by @DanielCliftonGuardian and merged by @Jakeii 11 minutes and 54 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Jakeii Jakeii Jakeii left review comments

@marjisound marjisound marjisound approved these changes

Assignees

@Jakeii Jakeii

Labels

feature Departmental tracking: work on a new feature Seen-on-PROD

Projects

None yet

Milestone

World Cup 2026

Development

Successfully merging this pull request may close these issues.

5 participants

@DanielCliftonGuardian @HarryFischer @Jakeii @petternitter @marjisound