diff --git a/apps/svelte.dev/src/routes/nav.json/+server.ts b/apps/svelte.dev/src/routes/nav.json/+server.ts
index e71856e111..86328aaa0e 100644
--- a/apps/svelte.dev/src/routes/nav.json/+server.ts
+++ b/apps/svelte.dev/src/routes/nav.json/+server.ts
@@ -11,6 +11,7 @@ export const GET = async () => {
 async function get_nav_list(): Promise<NavigationLink[]> {
 	const docs = index.docs.children.map((topic) => ({
 		title: topic.metadata.title,
+		path: '/' + topic.slug, // this will make the UI show a flyout menu for the docs nav entry
 		sections: topic.children.map((section) => ({
 			title: section.metadata.title,
 			sections: section.children.map((page) => ({
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
index 25afe011ea..0662c0f591 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
@@ -3,7 +3,7 @@
 	import { click_outside, focus_outside } from '@sveltejs/site-kit/actions';
 	import { Icon } from '@sveltejs/site-kit/components';
 	import { open_nav } from '@sveltejs/site-kit/nav';
-	import { mql, reduced_motion, theme } from '@sveltejs/site-kit/stores';
+	import { mql, reduced_motion } from '@sveltejs/site-kit/stores';
 	import { expoOut } from 'svelte/easing';
 	import { slide } from 'svelte/transition';
 
@@ -27,7 +27,6 @@
 
 <div
 	class="container"
-	class:dark={$theme.current === 'dark'}
 	use:focus_outside={() => (is_open = false)}
 	use:click_outside={() => (is_open = false)}
 >
@@ -155,8 +154,6 @@
 
 <style>
 	.container {
-		--shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
-
 		position: relative;
 
 		display: flex;
@@ -173,10 +170,6 @@
 		z-index: 4;
 	}
 
-	.container.dark {
-		--shadow: 0 0 0 1px var(--sk-back-4);
-	}
-
 	header {
 		position: relative;
 		/* z-index: 2; */
@@ -229,7 +222,7 @@
 		background-color: var(--sk-back-2);
 
 		border-radius: var(--sk-border-radius);
-		box-shadow: var(--shadow);
+		box-shadow: var(--sk-shadow);
 
 		cursor: pointer;
 	}
@@ -306,7 +299,7 @@
 		max-height: 70vh;
 		background: var(--sk-back-2);
 		z-index: -1;
-		box-shadow: var(--shadow);
+		box-shadow: var(--sk-shadow);
 		border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
 		display: flex;
 		flex-direction: column;
diff --git a/packages/site-kit/src/lib/components/LinksDropdown.svelte b/packages/site-kit/src/lib/components/LinksDropdown.svelte
new file mode 100644
index 0000000000..d23114f9ff
--- /dev/null
+++ b/packages/site-kit/src/lib/components/LinksDropdown.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import type { NavigationLink } from '../types';
+
+	let { links: _links, prefix }: { links: NavigationLink; prefix: string } = $props();
+
+	const links = $derived([
+		{ title: _links.title, path: _links.pathname },
+		..._links.sections!.map((s) => ({ title: s.title, path: s.path! }))
+	]);
+	const current = $derived($page.url.pathname.startsWith(`/${prefix}`) ? 'page' : null);
+</script>
+
+<div class="dropdown">
+	<a href={links[0].path} aria-current={current}>{links[0].title}</a>
+	<nav class="dropdown-content">
+		{#each links.slice(1) as link}
+			<a href={link.path}>{link.title}</a>
+		{/each}
+	</nav>
+</div>
+
+<style>
+	.dropdown {
+		position: relative;
+		display: inline-block;
+	}
+
+	.dropdown-content {
+		display: none;
+		position: absolute;
+		left: -1rem;
+		background-color: var(--sk-back-1);
+		min-width: 10rem;
+		z-index: 1;
+		animation: flyout 0.3s ease-in-out;
+		box-shadow: var(--sk-shadow);
+		border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
+	}
+
+	@keyframes flyout {
+		from {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.dropdown:hover .dropdown-content {
+		display: block;
+	}
+
+	.dropdown-content a {
+		color: var(--sk-text-3);
+		padding: 1.3rem;
+		text-decoration: none;
+		display: block;
+		margin: 0 !important;
+
+		&:last-of-type {
+			border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
+		}
+	}
+
+	.dropdown-content a:hover {
+		background-color: var(--sk-back-4);
+	}
+</style>
diff --git a/packages/site-kit/src/lib/components/index.ts b/packages/site-kit/src/lib/components/index.ts
index 02f0f45543..50b1eed77a 100644
--- a/packages/site-kit/src/lib/components/index.ts
+++ b/packages/site-kit/src/lib/components/index.ts
@@ -4,3 +4,4 @@ export { default as Icons } from './Icons.svelte';
 export { default as Section } from './Section.svelte';
 export { default as Shell } from './Shell.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as LinksDropdown } from './LinksDropdown.svelte';
diff --git a/packages/site-kit/src/lib/docs/DocsOnThisPage.svelte b/packages/site-kit/src/lib/docs/DocsOnThisPage.svelte
index 6a6784e703..eb589fed9f 100644
--- a/packages/site-kit/src/lib/docs/DocsOnThisPage.svelte
+++ b/packages/site-kit/src/lib/docs/DocsOnThisPage.svelte
@@ -4,7 +4,7 @@
 	import { page } from '$app/stores';
 	import { click_outside, focus_outside, root_scroll } from '../actions';
 	import Icon from '../components/Icon.svelte';
-	import { mql, nav_open, on_this_page_open, overlay_open, reduced_motion, theme } from '../stores';
+	import { mql, nav_open, on_this_page_open, overlay_open, reduced_motion } from '../stores';
 	import { createEventDispatcher, onMount, tick } from 'svelte';
 	import { expoOut } from 'svelte/easing';
 	import { readable } from 'svelte/store';
@@ -175,7 +175,6 @@
 	<aside
 		class="on-this-page"
 		class:mobile={$is_mobile}
-		class:dark={$theme.current === 'dark'}
 		style:z-index={mobile_z_index}
 		bind:this={containerEl}
 		use:click_outside={() => $is_mobile && ($on_this_page_open = false)}
@@ -332,7 +331,6 @@
 	}
 
 	.on-this-page.mobile {
-		--shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
 		position: relative;
 		top: 0;
 		left: 0;
@@ -349,10 +347,6 @@
 		overflow-y: initial;
 	}
 
-	.on-this-page.mobile.dark {
-		--shadow: 0 0 0 1px var(--sk-back-4);
-	}
-
 	.on-this-page.mobile .desktop-only-heading {
 		display: none;
 	}
@@ -369,7 +363,7 @@
 
 		z-index: 2;
 
-		box-shadow: var(--shadow);
+		box-shadow: var(--sk-shadow);
 		border-radius: var(--sk-border-radius);
 		box-sizing: border-box;
 
@@ -410,7 +404,7 @@
 		background-color: var(--sk-back-3);
 
 		border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
-		box-shadow: var(--shadow);
+		box-shadow: var(--sk-shadow);
 	}
 
 	.on-this-page.mobile ul {
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index d07cae5c09..f681fa670d 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -13,6 +13,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	import Separator from './Separator.svelte';
 	import type { NavigationLink } from '../types';
 	import type { Snippet } from 'svelte';
+	import LinksDropdown from '../components/LinksDropdown.svelte';
 
 	interface Props {
 		home_title?: string;
@@ -103,12 +104,16 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 		<div class="menu">
 			{#each links as link}
-				<a
-					href={link.pathname}
-					aria-current={$page.url.pathname.startsWith(`/${link.prefix}`) ? 'page' : null}
-				>
-					{link.title}
-				</a>
+				{#if link.sections?.[0].path}
+					<LinksDropdown links={link} prefix={link.prefix} />
+				{:else}
+					<a
+						href={link.pathname}
+						aria-current={$page.url.pathname.startsWith(`/${link.prefix}`) ? 'page' : null}
+					>
+						{link.title}
+					</a>
+				{/if}
 			{/each}
 
 			<Separator />
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index ec4df2533d..617431fe42 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -68,6 +68,7 @@ body {
 		--sk-text-4: hsl(0, 0%, 45%);
 		--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
 		--sk-scrollbar: rgba(255, 255, 255, 0.3);
+		--sk-shadow: 0px 0px 0 1px var(--sk-back-4);
 
 		--sk-theme-1-variant: hsl(15, 100%, 40%);
 		--sk-theme-2-variant: hsl(240, 8%, 35%);
@@ -107,6 +108,7 @@ body {
 		--sk-text-3: var(--sk-theme-2);
 		--sk-text-4: hsl(0, 0%, 65%);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
+		--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
 
 		/* same in light mode, different in dark mode */
 		--sk-theme-1-variant: hsl(15, 100%, 50%);
@@ -168,6 +170,7 @@ body {
 		--sk-text-3: var(--sk-theme-2);
 		--sk-text-4: hsl(0, 0%, 65%);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
+		--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
 
 		/* same in light mode, different in dark mode */
 		--sk-theme-1-variant: hsl(15, 100%, 50%);
@@ -214,6 +217,7 @@ body {
 		--sk-text-4: hsl(0, 0%, 45%);
 		--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
 		--sk-scrollbar: rgba(255, 255, 255, 0.3);
+		--sk-shadow: 0px 0px 0 1px var(--sk-back-4);
 
 		--sk-back-3-hsl: 0, 0%, 14%;
 		--sk-theme-1-variant: hsl(15, 100%, 40%);
diff --git a/packages/site-kit/src/lib/types.d.ts b/packages/site-kit/src/lib/types.d.ts
index 422b72bb2d..67d05281c7 100644
--- a/packages/site-kit/src/lib/types.d.ts
+++ b/packages/site-kit/src/lib/types.d.ts
@@ -4,8 +4,10 @@ export interface NavigationLink {
 	pathname: string;
 	sections?: {
 		title: string;
+		path?: string;
 		sections: {
 			title: string;
+			path?: string;
 			sections: {
 				title: string;
 				path: string;