Header/Nav for 2026 world cup fronts

ab-testing/config/abTests.ts

@@ -133,6 +133,18 @@ const ABTests: ABTest[] = [
 		groups: ["control", "variant"],
 		shouldForceMetricsCollection: true,
 	},
+	{
+		name: "webx-world-cup-2026-subnav",
+		description:
+			"Test of World Cup 2026 subnav on world cup related content",
+		owners: ["dotcom.platform@guardian.co.uk:"],
+		expirationDate: "2026-07-20",
+		type: "server",
+		status: "ON",
+		audienceSize: 0 / 100,
+		groups: ["enable"],
+		shouldForceMetricsCollection: false,
+	},
 ];
 
 const activeABtests = ABTests.filter((test) => test.status === "ON");

dotcom-rendering/src/components/DirectoryPageNav.stories.tsx

@@ -1,7 +1,17 @@
 import { allModes } from '../../.storybook/modes';
 import preview from '../../.storybook/preview';
+import { BetaABTests } from '../experiments/lib/beta-ab-tests';
+import { setBetaABTests } from '../lib/useAB';
 import { DirectoryPageNav } from './DirectoryPageNav';
 
+const mockAB = new BetaABTests({
+	isServer: true,
+	serverSideABTests: {
+		'webx-world-cup-2026-subnav': 'enable',
+	},
+});
+setBetaABTests(mockAB);
+
 const meta = preview.meta({
 	component: DirectoryPageNav,
 	title: 'Components/Directory Page Nav',
@@ -22,6 +32,18 @@ export const WomensEuro2025 = meta.story({
 	},
 });
 
+export const WorldCup2026 = meta.story({
+	args: {
+		pageId: 'football/world-cup-2026',
+	},
+});
+
+export const WorldCup2026MatchCenter = meta.story({
+	args: {
+		pageId: 'football/world-cup-2026/overview',
+	},
+});
+
 export const OtherCompetition = meta.story({
 	args: {
 		pageId: 'football/premierleague/table',