Make targeting sidebar links with CSS a little easier (#3281)

alvinometric · delucis · web-flow · commit 13e344035cf3 · 2025-07-11T12:50:19.000+02:00
Co-authored-by: Chris Swithinbank &lt;swithinbank@gmail.com&gt;
diff --git a/.changeset/breezy-months-kneel.md b/.changeset/breezy-months-kneel.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Adds a `sl-sidebar-link` class to sidebar links
diff --git a/packages/starlight/components/SidebarSublist.astro b/packages/starlight/components/SidebarSublist.astro
@@ -21,7 +21,7 @@ const { sublist, nested } = Astro.props;
 					<a
 						href={entry.href}
 						aria-current={entry.isCurrent && 'page'}
-						class:list={[{ large: !nested }, entry.attrs.class]}
+						class:list={['sl-sidebar-link', { large: !nested }, entry.attrs.class]}
 						{...entry.attrs}
 					>
 						<span>{entry.label}</span>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@astrojs/starlight": patch
 +---
++
 +Adds a `sl-sidebar-link` class to sidebar links
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ const { sublist, nested } = Astro.props;`
`21`	`21`	`<a`
`22`	`22`	`href={entry.href}`
`23`	`23`	`aria-current={entry.isCurrent && 'page'}`
`24`		`- class:list={[{ large: !nested }, entry.attrs.class]}`
	`24`	`+ class:list={['sl-sidebar-link', { large: !nested }, entry.attrs.class]}`
`25`	`25`	`{...entry.attrs}`
`26`	`26`	`>`
`27`	`27`	`<span>{entry.label}</span>`