diff --git a/.changeset/short-planets-sin.md b/.changeset/short-planets-sin.md
new file mode 100644
index 00000000000..60cf687f8b1
--- /dev/null
+++ b/.changeset/short-planets-sin.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes an issue with custom pages using the `` component and a custom sidebar missing highlighting for the active page and navigation links.
diff --git a/packages/starlight/__tests__/basics/starlight-page-route-data.test.ts b/packages/starlight/__tests__/basics/starlight-page-route-data.test.ts
index abba3a76b13..91310f84a40 100644
--- a/packages/starlight/__tests__/basics/starlight-page-route-data.test.ts
+++ b/packages/starlight/__tests__/basics/starlight-page-route-data.test.ts
@@ -103,7 +103,7 @@ test('adds custom frontmatter data to route shape', async () => {
test('uses generated sidebar when no sidebar is provided', async () => {
const data = await generateStarlightPageRouteData({
props: starlightPageProps,
- url: starlightPageUrl,
+ url: new URL('https://example.com/getting-started/'),
});
expect(data.sidebar).toMatchInlineSnapshot(`
[
@@ -119,7 +119,7 @@ test('uses generated sidebar when no sidebar is provided', async () => {
"attrs": {},
"badge": undefined,
"href": "/getting-started/",
- "isCurrent": false,
+ "isCurrent": true,
"label": "Getting Started",
"type": "link",
},
@@ -188,7 +188,7 @@ test('uses provided sidebar if any', async () => {
'reference/frontmatter',
],
},
- url: starlightPageUrl,
+ url: new URL('https://example.com/test/2'),
});
expect(data.sidebar).toMatchInlineSnapshot(`
[
@@ -207,7 +207,7 @@ test('uses provided sidebar if any', async () => {
"attrs": {},
"badge": undefined,
"href": "/test/2",
- "isCurrent": false,
+ "isCurrent": true,
"label": "Custom link 2",
"type": "link",
},
@@ -245,6 +245,8 @@ test('uses provided sidebar if any', async () => {
},
]
`);
+ expect(data.pagination.prev?.href).toBe('/test/1');
+ expect(data.pagination.next?.href).toBe('/guides/authoring-content/');
});
test('throws error if sidebar is malformated', async () => {
diff --git a/packages/starlight/utils/navigation.ts b/packages/starlight/utils/navigation.ts
index f9dffff1a3b..2ae0fa092fa 100644
--- a/packages/starlight/utils/navigation.ts
+++ b/packages/starlight/utils/navigation.ts
@@ -348,7 +348,7 @@ const intermediateSidebars = new Map();
export function getSidebar(pathname: string, locale: string | undefined): SidebarEntry[] {
let intermediateSidebar = intermediateSidebars.get(locale);
if (!intermediateSidebar) {
- intermediateSidebar = getSidebarFromConfig(config.sidebar, pathname, locale);
+ intermediateSidebar = getIntermediateSidebarFromConfig(config.sidebar, pathname, locale);
intermediateSidebars.set(locale, intermediateSidebar);
}
return getSidebarFromIntermediateSidebar(intermediateSidebar, pathname);
@@ -359,6 +359,16 @@ export function getSidebarFromConfig(
sidebarConfig: StarlightConfig['sidebar'],
pathname: string,
locale: string | undefined
+): SidebarEntry[] {
+ const intermediateSidebar = getIntermediateSidebarFromConfig(sidebarConfig, pathname, locale);
+ return getSidebarFromIntermediateSidebar(intermediateSidebar, pathname);
+}
+
+/** Get the intermediate sidebar for the current page using the specified sidebar config. */
+function getIntermediateSidebarFromConfig(
+ sidebarConfig: StarlightConfig['sidebar'],
+ pathname: string,
+ locale: string | undefined
): SidebarEntry[] {
const routes = getLocaleRoutes(locale);
if (sidebarConfig) {