diff --git a/web/src/lib/components/settings/SettingsNav.stories.svelte b/web/src/lib/components/settings/SettingsNav.stories.svelte
new file mode 100644
index 00000000..961fc407
--- /dev/null
+++ b/web/src/lib/components/settings/SettingsNav.stories.svelte
@@ -0,0 +1,54 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import SettingsNav, { type SettingsNavItem } from "./SettingsNav.svelte";
+	import User from "$icon/user-round";
+	import Key from "$icon/key";
+	import Mail from "$icon/mail";
+	import Bell from "$icon/bell";
+	import Volleyball from "$icon/volleyball";
+	import Spool from "$icon/spool";
+	import Globe from "$icon/globe";
+
+	const items: SettingsNavItem[] = [
+		{ id: "profile", label: "Profile", href: "/settings", icon: User },
+		{ id: "keys", label: "Keys", href: "/settings/keys", icon: Key },
+		{ id: "emails", label: "Emails", href: "/settings/emails", icon: Mail },
+		{ id: "notifications", label: "Notifications", href: "/settings/notifications", icon: Bell },
+		{ id: "knots", label: "Knots", href: "/settings/knots", icon: Volleyball },
+		{ id: "spindles", label: "Spindles", href: "/settings/spindles", icon: Spool },
+		{ id: "sites", label: "Sites", href: "/settings/sites", icon: Globe }
+	];
+
+	const { Story } = defineMeta({
+		title: "Settings/SettingsNav",
+		component: SettingsNav,
+		tags: ["autodocs"],
+		args: { items, active: "profile" }
+	});
+</script>
+
+<!-- the frame stretches to its container in the settings layout, so the stories put it
+     in a tall box rather than letting it hug its items -->
+<Story name="Default">
+	{#snippet template(args)}
+		<div class="flex h-[568px] w-44 items-stretch">
+			<SettingsNav {...args} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Active elsewhere" args={{ active: "notifications" }}>
+	{#snippet template(args)}
+		<div class="flex h-[568px] w-44 items-stretch">
+			<SettingsNav {...args} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="No icons" args={{ items: items.map(({ id, label, href }) => ({ id, label, href })) }}>
+	{#snippet template(args)}
+		<div class="flex h-[568px] w-44 items-stretch">
+			<SettingsNav {...args} />
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/settings/SettingsNav.svelte b/web/src/lib/components/settings/SettingsNav.svelte
index e60c3c60..4326760a 100644
--- a/web/src/lib/components/settings/SettingsNav.svelte
+++ b/web/src/lib/components/settings/SettingsNav.svelte
@@ -27,7 +27,7 @@
 	// grows by 1px on hover.
 	const itemClass = (isActive: boolean) =>
 		[
-			"flex min-h-8 w-full items-center gap-1.5 rounded-sm border px-3 py-1.5",
+			"flex min-h-8 w-full items-center gap-1.5 overflow-hidden rounded-sm border px-3 py-1.5",
 			"typography-paragraph-regular text-foreground-default no-underline hover:no-underline",
 			"transition-colors duration-150 ease-in-out",
 			"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
@@ -38,7 +38,7 @@
 </script>
 
 <nav
-	class="flex w-full shrink-0 flex-col border-b border-border-default bg-background-navigation-frame p-2 md:w-44 md:self-stretch md:border-r md:border-b-0"
+	class="flex w-full shrink-0 flex-col gap-1 border-b border-border-default bg-background-navigation-frame p-2 md:w-44 md:self-stretch md:border-r md:border-b-0"
 	aria-label={label}
 >
 	{#each items as item (item.id)}
@@ -52,7 +52,9 @@
 			{#if Glyph}
 				<Glyph class="size-3.5 shrink-0" aria-hidden="true" />
 			{/if}
-			{item.label}
+			<!-- Figma clips the item rather than letting a long label wrap it taller; an
+			     ellipsis keeps that height without hiding the label outright -->
+			<span class="min-w-0 truncate">{item.label}</span>
 		</a>
 	{/each}
 </nav>