Show mini nav by OlwenPearce · Pull Request #17075 · guardian/dotcom-rendering

OlwenPearce · 2026-10-29T09:03:47Z

What does this change?

Renders a mini nav on a card, when provided and supported

This includes some general tweaks to support it:

make header padding configurable, in order to reduce it when there is a mini nav
make the whole menu scroll, and remove the scroll line, when a mini nav. (Note, we will likely roll this out to other navs later)

Why?

New feature

How has this change been tested?

Tests

Automated tests

Unit and Storybook tests added

Manual testing

I tested local running with local frontend and fonts tool. Steps were

Update the client lib in all repos
Edit a front in local facia-client to add the mini nav
Generate the pressed file in frontend via the debug endpoint
Upload it to the s3 bucket
Run frontend and DCR locally
View at http://localhost:3030/Front/http:localhost:9000/olwen

-->

Screenshots

Here it is deploying on a local run

I have indented it slightly to fix the below tab issue, and visually separate it from the title

I've justified this by it being slightly indented on fimga, but this may not be intentional

In general I have made padding consisent with figma (to my eyes)

It's worth looking on storybook because this does look different with different styles - e.g. the apperence here, which is overall fine but the section looks much smaller with the image underneath and no title

This was useful for testing but not to keep in

github-actions · 2026-10-29T09:46:27Z

Deploy build 4282 of `dotcom:ab-testing` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2026-10-29T09:46:33Z

🚀 Image pushed to AWS ECR

Image digest: sha256:c4f0a2b45267523592079170773588d96cc5764064f7f61e36543d74114d3a01

🐛 Run the image locally

The following can be used to run the image locally:

# Refer to image using the immutable digest. Find alternatives below.
IMAGE_IDENTIFIER="@sha256:c4f0a2b45267523592079170773588d96cc5764064f7f61e36543d74114d3a01"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-show-mini-nav"

# Refer to image using build tag
# IMAGE_IDENTIFIER=":build-33948"

# Set environment variables for the AWS CLI
AWS_PROFILE="<A_PROFILE_FROM_JANUS>"
AWS_DEFAULT_REGION="eu-west-1"

IMAGE_ACCOUNT_ID=$(aws ssm get-parameter --name /organisation/accounts/artifacts --query "Parameter.Value" --output text)
REGISTRY="${IMAGE_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com"
IMAGE="${REGISTRY}/guardian/dotcom-rendering/dotcom-rendering${IMAGE_IDENTIFIER}"

# Login to AWS ECR https://docs.aws.amazon.com/AmazonECR/latest/userguide/registry_auth.html
aws ecr get-login-password | docker login --username AWS --password-stdin $REGISTRY

# Pull the image
docker pull $IMAGE

# Run the image. You'll likely need to set additional flags. See https://docs.docker.com/reference/cli/docker/container/run.
docker run $IMAGE

From guardian/actions-ecr.

github-actions · 2026-10-29T09:49:14Z

Deploy build 33948 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

Instead of section colour

…into show-mini-nav

The mini nav is on a card and so does not card about this

Fweddi · 2026-11-09T09:32:28Z

+		.video-container:not(
+				${isLoopAndInLoopClickTestVariant
+					? `.cinemagraph, .loop`
+					: `.cinemagraph`}
+			):hover,


is the loop / cinemagraph hover behaviour part of this PR

Fweddi · 2026-11-09T09:33:46Z

 	customSubNav: CustomSubnav;
 	renderingPage: RenderingPage;
-	pageId: string;
+	pageId?: string;


is there a reason this is now optional?

The pageId is used on the subnav to bold the page the subnav is currently on. This doesn't make sense in the context of a card - the card doesn't have a page Id to pass in when calling this, and we don't need to display it either

Fweddi · 2026-11-09T09:34:12Z

+	 * article min-height, otherwise the outer row remains taller than the
+	 * inline list itself.
+	 */
+	min-height: 0;


Would removing this min-height altogether work?

I did try to do it without this - the 0 here is an override of the article settings. Without it, my attempts to reduce the padding did nothing because it was inheriting the shared article minimum height and refusing to go below it. This is very much "I found a way to make it work" though - suggestions for other approaches are welcome

Fweddi · 2026-11-09T09:34:40Z

+const articleHeaderGapStyles = css`
+	margin-left: ${space[1]}px;
+	padding-left: ${space[1]}px;
+`;


How come we're using a mix of margin and padding?

Fweddi · 2026-11-09T09:36:58Z

+	padding-left: 1px;
+	margin-left: 1px;


should these be space values?

Fweddi · 2026-11-09T09:45:34Z

+			<div
+				className="mini-nav"
+				css={css`
+					position: relative;
+					z-index: ${getZIndex('card-nested-link')};
+					min-width: 0;
+					--custom-subnav-header-text: ${palette(
+						trail.miniNavData.header.dotcomPath
+							? '--card-kicker-text'
+							: '--card-headline',
+					)};
+					--masthead-nav-link-text: ${palette('--card-headline')};
+					--masthead-nav-link-text-hover: ${palette(
+						'--card-headline',
+					)};
+				`}
+			>


I wonder if this could be its own component MiniNav? Unsure how it relates to CustomSubNav – is it just a wrapper element?

OlwenPearce added 9 commits October 29, 2026 09:35

Render mini nav data

3493543

Reduce top bar padding

fc381ec

Scroll with title

f17e526

Add case to show image not rendered

b754a47

Only display mini nav when flex gen boost and above

b97830d

Remove not rendered storybook

fe81fe1

This was useful for testing but not to keep in

Extract test fixture

26db67b

Reduce re-ordering

b4dac1a

Post rebase fix

5ede409

OlwenPearce force-pushed the show-mini-nav branch from ff71550 to 5ede409 Compare October 29, 2026 09:44

OlwenPearce added run_chromatic Runs chromatic when label is applied feature Departmental tracking: work on a new feature labels Oct 29, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Oct 29, 2026

Adjust to use cards kicker colour

8989900

Instead of section colour

OlwenPearce added the run_chromatic Runs chromatic when label is applied label Oct 29, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Oct 29, 2026

OlwenPearce added 2 commits October 29, 2026 12:20

Use standard new card in stories

5be29bf

Fix underlines / hovering

9352018

OlwenPearce added the run_chromatic Runs chromatic when label is applied label Oct 29, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Oct 29, 2026

Make card size larger

ecbe166

OlwenPearce added the run_chromatic Runs chromatic when label is applied label Oct 29, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Oct 29, 2026

OlwenPearce and others added 4 commits November 2, 2026 17:09

Merge branch 'main' into show-mini-nav

ac23a89

Use the same padding without a dividing line as with

a6f187b

Pad ever so slightly

53aa841

Try to make things cleaner / more readable

6875ab9

OlwenPearce marked this pull request as ready for review November 6, 2026 09:11

OlwenPearce and others added 9 commits November 6, 2026 09:12

Merge branch 'main' into show-mini-nav

1161860

Post rebase issues

5eaf655

Fix padding reversion

c050538

Slight padding

f2b0a18

Merge branch 'main' into show-mini-nav

a31ced5

Merge branch 'show-mini-nav' of github.com:guardian/dotcom-rendering …

2dc143f

…into show-mini-nav

Generate new schemas

f024f86

Rebase fix: make pageId optional

1bd5664

The mini nav is on a card and so does not card about this

Rebase fix: remove unused var

71179f8

OlwenPearce added the run_chromatic Runs chromatic when label is applied label Nov 6, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 6, 2026

Rebase fix: remove unused var

6ec5fd5

OlwenPearce added the run_chromatic Runs chromatic when label is applied label Nov 9, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 9, 2026

Fweddi reviewed Nov 9, 2026

View reviewed changes

Navigation Menu

Repository navigation

Show mini nav - #17075

Show mini nav#17075
OlwenPearce wants to merge 27 commits into
mainfrom
show-mini-nav

OlwenPearce commented Oct 29, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 29, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 29, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 29, 2026 •

edited

Loading

Uh oh!

Fweddi Nov 9, 2026

Uh oh!

Fweddi Nov 9, 2026

Uh oh!

OlwenPearce Nov 9, 2026

Uh oh!

Fweddi Nov 9, 2026

Uh oh!

OlwenPearce Nov 9, 2026

Uh oh!

Fweddi Nov 9, 2026

Uh oh!

Fweddi Nov 9, 2026

Uh oh!

Fweddi Nov 9, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

OlwenPearce commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this change?

Why?

How has this change been tested?

Tests

Automated tests

Manual testing

Screenshots

Uh oh!

github-actions Bot commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Image pushed to AWS ECR

Uh oh!

github-actions Bot commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

OlwenPearce commented Oct 29, 2026 •

edited

Loading

github-actions Bot commented Oct 29, 2026 •

edited

Loading

github-actions Bot commented Oct 29, 2026 •

edited

Loading

github-actions Bot commented Oct 29, 2026 •

edited

Loading