diff --git a/.changeset/add-nav-recipe.md b/.changeset/add-nav-recipe.md
new file mode 100644
index 00000000..87916a17
--- /dev/null
+++ b/.changeset/add-nav-recipe.md
@@ -0,0 +1,10 @@
+---
+"@styleframe/theme": minor
+"styleframe": minor
+---
+
+Add Nav recipe with list-style utility
+
+- Add `useNavRecipe` and `useNavItemRecipe` multi-part recipes with size (xs–xl), color, and variant (pills, underline, default) support
+- Add `useListStyleUtility` shorthand utility for the `list-style` CSS property
+- Add Nav storybook components, grid previews, and stories
diff --git a/.claude/styleframe-recipe-prompt.md b/.claude/styleframe-recipe-prompt.md
index 74208a97..50b52930 100644
--- a/.claude/styleframe-recipe-prompt.md
+++ b/.claude/styleframe-recipe-prompt.md
@@ -670,6 +670,29 @@ defaultVariants: {
 
 Custom axes should be simple enums that map to a small number of CSS properties. Complex conditional behavior belongs in compound variants instead.
 
+### Boolean State Axes (active, disabled, block, etc.)
+
+Boolean component states MUST be modeled as variant axes with string `"true"` / `"false"` keys, not as manual class additions with `selector()` callbacks. Place the state-specific CSS directly in the variant value:
+
+```ts
+active: {
+	true: { fontWeight: "@font-weight.semibold" },
+	false: {},
+},
+disabled: {
+	true: { cursor: "not-allowed", opacity: "0.5", pointerEvents: "none" },
+	false: {},
+},
+```
+
+Default to `"false"` in `defaultVariants`. The consuming component passes the state as a string variant prop:
+
+```ts
+recipe({ active: isActive ? "true" : "false" })
+```
+
+**NEVER** use `selector()` with class-based modifiers (e.g., `.component.-active`) for states that apply to the element itself. Use `className` compound variants + `selector()` only when the state styles target **child elements** (e.g., `.button-group.-horizontal > .button`).
+
 ---
 
 ## Compound Variants
diff --git a/apps/docs/content/docs/06.components/02.composables/06.nav.md b/apps/docs/content/docs/06.components/02.composables/06.nav.md
new file mode 100644
index 00000000..9d6cc6d7
--- /dev/null
+++ b/apps/docs/content/docs/06.components/02.composables/06.nav.md
@@ -0,0 +1,572 @@
+---
+title: Nav
+description: A navigation component for horizontal and vertical link lists. Supports multiple colors, visual styles, sizes, and active/disabled states through a two-part recipe system.
+---
+
+## Overview
+
+The **Nav** is a navigation component used for building horizontal and vertical link lists such as navbars, sidebars, and tab bars. It is composed of two recipe parts: `useNavRecipe()` for the container that controls layout direction and spacing, and `useNavItemRecipe()` for individual navigation links with color, variant, and interactive state options. Each composable creates a fully configured [recipe](/docs/api/recipes) with compound variants that handle the color-variant combinations automatically.
+
+The Nav recipes integrate directly with the default [design tokens preset](/docs/design-tokens/presets) and generate type-safe utility classes at build time with zero runtime CSS.
+
+## Why use the Nav recipe?
+
+The Nav recipe helps you:
+
+- **Ship faster with sensible defaults**: Get 2 orientations, 3 colors, 2 visual styles, and 3 sizes out of the box with a pair of composable calls.
+- **Compose flexible layouts**: Two coordinated recipes (container + item) share the size axis, so your navigation stays internally consistent.
+- **Maintain consistency**: Compound variants ensure every color-variant combination follows the same design rules, including hover, focus, active, and dark mode states.
+- **Customize without forking**: Override base styles, default variants, or filter out options you don't need — all through the options API.
+- **Stay type-safe**: Full TypeScript support means your editor catches invalid color, variant, or size values at compile time.
+- **Integrate with your tokens**: Every value references the design tokens preset, so theme changes propagate automatically.
+
+## Usage
+
+::steps{level="4"}
+
+#### Register the recipes
+
+Add the Nav recipes to a local Styleframe instance. The global `styleframe.config.ts` provides design tokens and utilities, while the component-level file registers the recipes themselves:
+
+:::code-tree{default-value="src/components/nav.styleframe.ts"}
+
+```ts [src/components/nav.styleframe.ts]
+import { styleframe } from 'virtual:styleframe';
+import { useNavRecipe, useNavItemRecipe } from '@styleframe/theme';
+
+const s = styleframe();
+
+const nav = useNavRecipe(s);
+const navItem = useNavItemRecipe(s);
+
+export default s;
+```
+
+```ts [styleframe.config.ts]
+import { styleframe } from 'styleframe';
+import { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe/theme';
+
+const s = styleframe();
+
+useDesignTokensPreset(s);
+useUtilitiesPreset(s);
+
+export default s;
+```
+
+:::
+
+#### Build the component
+
+Import the `nav` and `navItem` runtime functions from the virtual module and pass variant props to compute class names:
+
+:::tabs
+::::tabs-item{icon="i-devicon-react" label="React"}
+
+```ts [src/components/Nav.tsx]
+import { nav, navItem } from "virtual:styleframe";
+
+interface NavItemProps {
+	color?: "light" | "dark" | "neutral";
+	variant?: "ghost" | "link";
+	size?: "sm" | "md" | "lg";
+	active?: boolean;
+	disabled?: boolean;
+	href?: string;
+	children?: React.ReactNode;
+}
+
+interface NavProps {
+	orientation?: "horizontal" | "vertical";
+	size?: "sm" | "md" | "lg";
+	children?: React.ReactNode;
+}
+
+export function Nav({
+	orientation = "horizontal",
+	size = "md",
+	children,
+}: NavProps) {
+	return (
+		<nav className={nav({ orientation, size })}>
+			{children}
+		</nav>
+	);
+}
+
+export function NavItem({
+	color = "neutral",
+	variant = "ghost",
+	size = "md",
+	active = false,
+	disabled = false,
+	href,
+	children,
+}: NavItemProps) {
+	return (
+		<a
+			href={href}
+			className={navItem({
+				color,
+				variant,
+				size,
+				active: active ? "true" : "false",
+				disabled: disabled ? "true" : "false",
+			})}
+			aria-disabled={disabled || undefined}
+			tabIndex={disabled ? -1 : undefined}
+		>
+			{children}
+		</a>
+	);
+}
+```
+
+::::
+::::tabs-item{icon="i-devicon-vuejs" label="Vue"}
+
+```vue [src/components/Nav.vue]
+<script setup lang="ts">
+import { nav } from "virtual:styleframe";
+
+const {
+	orientation = "horizontal",
+	size = "md",
+} = defineProps<{
+	orientation?: "horizontal" | "vertical";
+	size?: "sm" | "md" | "lg";
+}>();
+</script>
+
+<template>
+	<nav :class="nav({ orientation, size })">
+		<slot />
+	</nav>
+</template>
+```
+
+```vue [src/components/NavItem.vue]
+<script setup lang="ts">
+import { navItem } from "virtual:styleframe";
+
+const {
+	color = "neutral",
+	variant = "ghost",
+	size = "md",
+	active = false,
+	disabled = false,
+	href,
+} = defineProps<{
+	color?: "light" | "dark" | "neutral";
+	variant?: "ghost" | "link";
+	size?: "sm" | "md" | "lg";
+	active?: boolean;
+	disabled?: boolean;
+	href?: string;
+}>();
+</script>
+
+<template>
+	<a
+		:href="href"
+		:class="navItem({ color, variant, size, active: active ? 'true' : 'false', disabled: disabled ? 'true' : 'false' })"
+		:aria-disabled="disabled || undefined"
+		:tabindex="disabled ? -1 : undefined"
+	>
+		<slot />
+	</a>
+</template>
+```
+
+::::
+:::
+
+#### See it in action
+
+:::story-preview
+---
+story: theme-recipes-nav--default
+panel: true
+---
+:::
+
+::
+
+## Orientation
+
+The Nav container recipe supports two orientations that control the flex layout direction. Horizontal arranges items in a row (ideal for top navbars and tab bars), while vertical stacks items in a column (ideal for sidebars and dropdown menus).
+
+::story-preview
+---
+story: theme-recipes-nav--vertical
+panel: true
+---
+::
+
+### Orientation Reference
+
+| Orientation | Flex Direction | Alignment | Use Case |
+|-------------|---------------|-----------|----------|
+| `horizontal` | `row` | `center` | Top-level navbars, tab bars, breadcrumbs |
+| `vertical` | `column` | `flex-start` | Sidebars, dropdown menus, stacked navigation |
+
+::tip
+**Pro tip:** Use `horizontal` for top-level navigation and `vertical` for sidebar navigation. The orientation only affects the container &mdash; individual items render the same regardless of direction.
+::
+
+## Colors
+
+The Nav item recipe includes 3 color variants: `light`, `dark`, and `neutral`. Like the Card recipe, Nav uses neutral-spectrum colors designed for structural navigation elements rather than status communication. Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations &mdash; including dark mode overrides.
+
+The `neutral` color adapts automatically: it uses dark text in light mode and light text in dark mode, making it the safest default for general-purpose navigation.
+
+::story-preview
+---
+story: theme-recipes-nav--dark
+panel: true
+---
+::
+
+### Color Reference
+
+::story-preview
+---
+story: theme-recipes-nav--all-variants
+height: 420
+---
+::
+
+| Color | Token | Use Case |
+|-------|-------|----------|
+| `light` | `@color.text` / `@color.gray-*` | Navigation on light backgrounds, stays light-text in dark mode |
+| `dark` | `@color.gray-200` | Navigation on dark backgrounds, stays dark appearance in light mode |
+| `neutral` | Adaptive (light ↔ dark) | Default color, adapts to the current color scheme |
+
+::tip
+**Pro tip:** Use `neutral` as your default nav item color. It adapts automatically to the user's color scheme, so you don't need to manage light and dark variants separately.
+::
+
+## Variants
+
+Two visual style variants control how nav items are rendered. Each variant is combined with the selected color through [compound variants](/docs/api/recipes#compound-variants), so you always get the correct text color and hover behavior for your chosen color.
+
+### Ghost
+
+Transparent background that reveals a tinted background on hover. The most common style for navigation, ideal for navbars and sidebars where items should be subtle at rest but clearly interactive on hover.
+
+::story-preview
+---
+story: theme-recipes-nav--ghost
+panel: true
+---
+::
+
+### Link
+
+Transparent background with colored text that gains an underline on hover. Use for secondary navigation, inline link lists, or when items should look like standard hyperlinks.
+
+::story-preview
+---
+story: theme-recipes-nav--link
+panel: true
+---
+::
+
+## Sizes
+
+Three size variants from `sm` to `lg` control the font size, gap, and padding of the navigation. The `size` prop affects both the container (font size and gap between items) and individual items (font size and padding).
+
+::story-preview
+---
+story: theme-recipes-nav--large
+panel: true
+---
+::
+
+### Size Reference
+
+::story-preview
+---
+story: theme-recipes-nav--all-sizes
+height: 480
+---
+::
+
+**Nav Container:**
+
+| Size | Font Size | Gap |
+|------|-----------|-----|
+| `sm` | `@font-size.xs` | `@0.25` |
+| `md` | `@font-size.sm` | `@0.5` |
+| `lg` | `@font-size.md` | `@0.75` |
+
+**Nav Item:**
+
+| Size | Font Size | Padding (V / H) |
+|------|-----------|-----------------|
+| `sm` | `@font-size.xs` | `@0.25` / `@0.5` |
+| `md` | `@font-size.sm` | `@0.375` / `@0.75` |
+| `lg` | `@font-size.md` | `@0.5` / `@1` |
+
+::note
+**Good to know:** The `size` prop must be passed to both the nav container and each nav item individually. The container controls font size and gap between items, while items control their own padding.
+::
+
+## Active
+
+The Nav item recipe includes an `active` boolean variant. Active items receive `font-weight: semibold` to visually distinguish the current page or section from other navigation links.
+
+::story-preview
+---
+story: theme-recipes-nav--active
+panel: true
+---
+::
+
+```ts
+// Active item via variant prop
+navItem({ color: "neutral", variant: "ghost", size: "md", active: "true" })
+```
+
+::tip
+**Good practice:** Always pair the active variant with `aria-current="page"` so both sighted users and screen reader users know which page is currently active.
+::
+
+## Disabled
+
+The Nav item recipe includes a built-in disabled state through two mechanisms: the `&:disabled` pseudo-class for native `<button>` elements, and the `disabled` boolean variant for `<a>` elements. Both reduce opacity to 0.5, set `cursor: not-allowed`, and disable pointer events.
+
+::story-preview
+---
+story: theme-recipes-nav--disabled
+panel: true
+---
+::
+
+```ts
+// Disabled item via variant prop
+navItem({ color: "neutral", variant: "ghost", size: "md", disabled: "true" })
+```
+
+## Anatomy
+
+The Nav recipe is composed of two independent recipes that work together to form a navigation layout:
+
+| Part | Recipe | Role |
+|------|--------|------|
+| **Container** | `useNavRecipe()` | Outer wrapper with flex layout, orientation, and gap |
+| **Item** | `useNavItemRecipe()` | Individual navigation link with color, variant, and interactive states |
+
+Each part is a standalone recipe with its own set of variants. The `size` prop should be passed consistently to both the container and each item so that font sizes and spacing stay coordinated. The `color` and `variant` props only apply to items.
+
+```html
+<!-- Both parts working together -->
+<nav class="nav(...)">
+    <a class="navItem(...)">Home</a>
+    <a class="navItem({ active: 'true' })" aria-current="page">About</a>
+    <a class="navItem({ disabled: 'true' })" aria-disabled="true">Disabled</a>
+</nav>
+```
+
+::tip
+**Pro tip:** The container recipe controls layout (direction, spacing) while the item recipe controls appearance (color, hover states, active/disabled states). You don't have to use the container &mdash; nav items work perfectly well on their own if you manage the layout yourself.
+::
+
+## Accessibility
+
+- **Use semantic HTML.** Render the container as a `<nav>` element with an `aria-label` to identify the navigation landmark. Use `<a>` elements for items that navigate and `<button>` for items that trigger actions.
+
+```html
+<!-- Correct: semantic nav landmark with label -->
+<nav aria-label="Main navigation" class="...">
+    <a href="/" class="...">Home</a>
+    <a href="/about" class="navItem({ active: 'true' })" aria-current="page">About</a>
+</nav>
+
+<!-- Avoid: non-semantic container -->
+<div class="...">
+    <span class="..." onclick="navigate('/')">Home</span>
+</div>
+```
+
+- **Mark the current page with `aria-current="page"`.** When a nav item represents the active page, add `aria-current="page"` alongside the `active: "true"` variant so screen readers announce it as the current location ([WCAG 2.4.8](https://www.w3.org/WAI/WCAG21/Understanding/location.html)).
+- **Focus visibility.** The nav item recipe includes a `:focus-visible` outline (2px solid, primary color, 2px offset) that appears only during keyboard navigation ([WCAG 2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html)).
+- **Disabled state.** For `<a>` elements, pass `disabled: "true"` and add `aria-disabled="true"` and `tabindex="-1"` to remove the link from the tab order. The `:disabled` pseudo-class handles `<button>` elements automatically.
+
+```html
+<!-- Correct: disabled link with ARIA attributes -->
+<a href="#" class="navItem({ disabled: 'true' })" aria-disabled="true" tabindex="-1">Disabled</a>
+
+<!-- Correct: disabled button element -->
+<button class="..." disabled>Disabled</button>
+```
+
+::tip
+**Good practice:** If your page has multiple `<nav>` elements, give each one a distinct `aria-label` (e.g., "Main navigation", "Footer navigation") so screen reader users can tell them apart.
+::
+
+## Customization
+
+### Overriding Defaults
+
+Each nav composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:
+
+```ts [src/components/nav.styleframe.ts]
+import { styleframe } from 'virtual:styleframe';
+import { useNavRecipe, useNavItemRecipe } from '@styleframe/theme';
+
+const s = styleframe();
+
+const nav = useNavRecipe(s, {
+    base: {
+        gap: '@1',
+    },
+    defaultVariants: {
+        orientation: 'vertical',
+        size: 'lg',
+    },
+});
+
+const navItem = useNavItemRecipe(s, {
+    base: {
+        borderRadius: '@border-radius.full',
+    },
+    defaultVariants: {
+        color: 'neutral',
+        variant: 'ghost',
+        size: 'lg',
+    },
+});
+
+export default s;
+```
+
+### Filtering Variants
+
+If you only need a subset of the available variants, use the `filter` option to limit which values are generated. This reduces the output CSS and keeps your component API focused:
+
+```ts [src/components/nav.styleframe.ts]
+import { styleframe } from 'virtual:styleframe';
+import { useNavRecipe, useNavItemRecipe } from '@styleframe/theme';
+
+const s = styleframe();
+
+const nav = useNavRecipe(s);
+
+// Only generate neutral color with ghost style
+const navItem = useNavItemRecipe(s, {
+    filter: {
+        color: ['neutral'],
+        variant: ['ghost'],
+    },
+});
+
+export default s;
+```
+
+::note
+**Good to know:** Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.
+::
+
+## API Reference
+
+### `useNavRecipe(s, options?)`
+
+Creates the nav container recipe with flex layout, orientation, and gap styling.
+
+**Parameters:**
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `s` | `Styleframe` | The Styleframe instance |
+| `options` | `DeepPartial<RecipeConfig>` | Optional overrides for the recipe configuration |
+| `options.base` | `VariantDeclarationsBlock` | Custom base styles for the nav container |
+| `options.variants` | `Variants` | Custom variant definitions for the recipe |
+| `options.defaultVariants` | `Record<keyof Variants, string>` | Default variant values for the recipe |
+| `options.compoundVariants` | `CompoundVariant[]` | Custom compound variant definitions for the recipe |
+| `options.filter` | `Record<string, string[]>` | Limit which variant values are generated |
+
+**Variants:**
+
+| Variant | Options | Default |
+|---------|---------|---------|
+| `orientation` | `horizontal`, `vertical` | `horizontal` |
+| `size` | `sm`, `md`, `lg` | `md` |
+
+### `useNavItemRecipe(s, options?)`
+
+Creates the nav item recipe with color, variant, interactive states, and active/disabled boolean variants.
+
+**Parameters:**
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `s` | `Styleframe` | The Styleframe instance |
+| `options` | `DeepPartial<RecipeConfig>` | Optional overrides for the recipe configuration |
+| `options.base` | `VariantDeclarationsBlock` | Custom base styles for the nav item |
+| `options.variants` | `Variants` | Custom variant definitions for the recipe |
+| `options.defaultVariants` | `Record<keyof Variants, string>` | Default variant values for the recipe |
+| `options.compoundVariants` | `CompoundVariant[]` | Custom compound variant definitions for the recipe |
+| `options.filter` | `Record<string, string[]>` | Limit which variant values are generated |
+
+**Variants:**
+
+| Variant | Options | Default |
+|---------|---------|---------|
+| `color` | `light`, `dark`, `neutral` | `neutral` |
+| `variant` | `ghost`, `link` | `ghost` |
+| `size` | `sm`, `md`, `lg` | `md` |
+| `active` | `true`, `false` | `false` |
+| `disabled` | `true`, `false` | `false` |
+
+[Learn more about recipes →](/docs/api/recipes)
+
+## Best Practices
+
+- **Pass `size` consistently to both recipes**: The container controls gap and font size, while items control their own padding. Mismatched sizes create visual inconsistency.
+- **Use `neutral` for general-purpose navigation**: The neutral color adapts to light and dark mode automatically, making it the safest default.
+- **Prefer `ghost` for primary navigation bars**: The transparent resting state keeps the nav clean while hover states confirm interactivity. Use `link` for secondary or inline navigation.
+- **Always mark the current page as active**: Pass `active: "true"` alongside `aria-current="page"` so both visual and assistive technology users know where they are.
+- **Use `horizontal` for top navbars, `vertical` for sidebars**: Match the orientation to the layout context rather than mixing orientations within the same navigation level.
+- **Filter what you don't need**: If your component only uses one variant, pass a `filter` option to reduce generated CSS.
+- **Override defaults at the recipe level**: Set your most common variant combination as `defaultVariants` so component consumers write less code.
+
+## FAQ
+
+::accordion
+
+:::accordion-item{label="Why are there two separate recipes instead of one?" icon="i-lucide-circle-help"}
+Navigation has two distinct concerns: the container manages layout (flex direction, gap, alignment) while items manage appearance (color, hover states, active/disabled modifiers). Two separate recipes keep each concern focused and let you customize them independently. You can also use nav items without the container recipe if you manage the layout yourself.
+:::
+
+:::accordion-item{label="Why doesn't the Nav recipe include semantic colors like primary or success?" icon="i-lucide-circle-help"}
+Navigation items are structural elements, not status indicators. Semantic colors (primary, success, error) communicate meaning through color, which is better suited to smaller, focused elements like badges, buttons, and callouts. Nav uses `light`, `dark`, and `neutral` to provide surface-appropriate text colors without implying a specific status.
+:::
+
+:::accordion-item{label="What's the difference between ghost and link variants?" icon="i-lucide-circle-help"}
+Both have a transparent resting state. The difference is that `ghost` reveals a tinted background on hover (like a toolbar button), while `link` adds an underline on hover (like a hyperlink). Use `ghost` for primary navigation bars and `link` for secondary or inline navigation lists.
+:::
+
+:::accordion-item{label="How does the active state work?" icon="i-lucide-circle-help"}
+The active state is controlled by the `active` boolean variant (`"true"` / `"false"`). It sets `font-weight: semibold` to visually distinguish the current page. Pass `active: "true"` as a variant prop and always pair it with `aria-current="page"` for accessibility.
+:::
+
+:::accordion-item{label="How does the disabled state work for links?" icon="i-lucide-circle-help"}
+HTML `<a>` elements do not support the native `disabled` attribute. The Nav item recipe provides a `disabled` boolean variant that applies the same styles as the `:disabled` pseudo-class (reduced opacity, not-allowed cursor, no pointer events). Pass `disabled: "true"` as a variant prop and pair it with `aria-disabled="true"` and `tabindex="-1"` to ensure the link is also inaccessible to keyboard and assistive technology users.
+:::
+
+:::accordion-item{label="How do compound variants work in the Nav item recipe?" icon="i-lucide-circle-help"}
+The Nav item recipe uses compound variants to map each color-variant combination to specific styles. For example, when `color` is `neutral` and `variant` is `ghost`, the compound variant applies `color: @color.text` in light mode and `color: @color.gray-200` in dark mode, along with hover, focus, and active state overrides. This approach keeps the individual `color` and `variant` definitions clean while handling all 6 combinations (3 colors &times; 2 variants) automatically.
+
+[Learn more about compound variants →](/docs/api/recipes#compound-variants)
+:::
+
+:::accordion-item{label="How does filtering affect compound variants?" icon="i-lucide-circle-help"}
+When you use the `filter` option, compound variants that reference filtered-out values are automatically removed. For example, if you filter `variant` to only `['ghost']`, all compound variants matching `link` are excluded from the generated output. Default variants are also adjusted if they reference a removed value.
+:::
+
+:::accordion-item{label="Can I use the Nav recipe without the design tokens preset?" icon="i-lucide-circle-help"}
+The Nav recipe references design tokens like `@color.primary`, `@font-size.sm`, and `@border-radius.md` through string refs. These tokens need to be defined in your Styleframe instance for the recipe to generate valid CSS. The easiest way is to use `useDesignTokensPreset(s)`, but you can also define the required tokens manually.
+:::
+
+::
diff --git a/apps/storybook/src/components/components/nav/Nav.vue b/apps/storybook/src/components/components/nav/Nav.vue
new file mode 100644
index 00000000..c3c480e9
--- /dev/null
+++ b/apps/storybook/src/components/components/nav/Nav.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { nav } from "virtual:styleframe";
+
+const props = withDefaults(
+	defineProps<{
+		orientation?: "horizontal" | "vertical";
+		size?: "sm" | "md" | "lg";
+	}>(),
+	{},
+);
+</script>
+
+<template>
+	<nav
+		:class="
+			nav({
+				orientation: props.orientation,
+				size: props.size,
+			})
+		"
+	>
+		<slot />
+	</nav>
+</template>
diff --git a/apps/storybook/src/components/components/nav/NavItem.vue b/apps/storybook/src/components/components/nav/NavItem.vue
new file mode 100644
index 00000000..3ea7f0f0
--- /dev/null
+++ b/apps/storybook/src/components/components/nav/NavItem.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { navItem } from "virtual:styleframe";
+
+const props = withDefaults(
+	defineProps<{
+		color?: "light" | "dark" | "neutral";
+		variant?: "ghost" | "link";
+		size?: "sm" | "md" | "lg";
+		active?: boolean;
+		disabled?: boolean;
+		href?: string;
+	}>(),
+	{},
+);
+</script>
+
+<template>
+	<a
+		:class="
+			navItem({
+				color: props.color,
+				variant: props.variant,
+				size: props.size,
+				active: props.active ? 'true' : 'false',
+				disabled: props.disabled ? 'true' : 'false',
+			})
+		"
+		:href="props.href"
+		:aria-disabled="props.disabled || undefined"
+	>
+		<slot />
+	</a>
+</template>
diff --git a/apps/storybook/src/components/components/nav/preview/NavGrid.vue b/apps/storybook/src/components/components/nav/preview/NavGrid.vue
new file mode 100644
index 00000000..32772bab
--- /dev/null
+++ b/apps/storybook/src/components/components/nav/preview/NavGrid.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Nav from "../Nav.vue";
+import NavItem from "../NavItem.vue";
+
+const colors = ["light", "dark", "neutral"] as const;
+const variants = ["ghost", "link"] as const;
+</script>
+
+<template>
+	<div class="nav-section">
+		<div v-for="variant in variants" :key="variant">
+			<hr />
+			<div class="nav-label">{{ variant }}</div>
+			<hr />
+			<div class="nav-row">
+				<div v-for="color in colors" :key="`${variant}-${color}`">
+					<Nav>
+						<NavItem :color="color" :variant="variant" href="#">
+							Home
+						</NavItem>
+						<NavItem
+							:color="color"
+							:variant="variant"
+							href="#"
+							active
+						>
+							About
+						</NavItem>
+						<NavItem :color="color" :variant="variant" href="#">
+							Contact
+						</NavItem>
+						<NavItem
+							:color="color"
+							:variant="variant"
+							href="#"
+							disabled
+						>
+							Disabled
+						</NavItem>
+					</Nav>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/apps/storybook/src/components/components/nav/preview/NavSizeGrid.vue b/apps/storybook/src/components/components/nav/preview/NavSizeGrid.vue
new file mode 100644
index 00000000..5e1c29d8
--- /dev/null
+++ b/apps/storybook/src/components/components/nav/preview/NavSizeGrid.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Nav from "../Nav.vue";
+import NavItem from "../NavItem.vue";
+
+const sizes = ["sm", "md", "lg"] as const;
+</script>
+
+<template>
+	<div class="nav-section">
+		<div v-for="size in sizes" :key="size">
+			<div class="nav-label">{{ size }}</div>
+			<Nav :size="size">
+				<NavItem :size="size" href="#">Home</NavItem>
+				<NavItem :size="size" href="#" active>About</NavItem>
+				<NavItem :size="size" href="#">Contact</NavItem>
+				<NavItem :size="size" href="#" disabled>Disabled</NavItem>
+			</Nav>
+		</div>
+	</div>
+</template>
diff --git a/apps/storybook/stories/components/nav.stories.ts b/apps/storybook/stories/components/nav.stories.ts
new file mode 100644
index 00000000..2b81da9b
--- /dev/null
+++ b/apps/storybook/stories/components/nav.stories.ts
@@ -0,0 +1,262 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import Nav from "../../src/components/components/nav/Nav.vue";
+import NavItem from "../../src/components/components/nav/NavItem.vue";
+import NavGrid from "../../src/components/components/nav/preview/NavGrid.vue";
+import NavSizeGrid from "../../src/components/components/nav/preview/NavSizeGrid.vue";
+
+const colors = ["light", "dark", "neutral"] as const;
+const variants = ["ghost", "link"] as const;
+const sizes = ["sm", "md", "lg"] as const;
+const orientations = ["horizontal", "vertical"] as const;
+
+const meta = {
+	title: "Theme/Recipes/Nav",
+	component: Nav,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "padded",
+	},
+	argTypes: {
+		orientation: {
+			control: "select",
+			options: orientations,
+			description: "The orientation of the nav",
+		},
+		size: {
+			control: "select",
+			options: sizes,
+			description: "The size",
+		},
+	},
+} satisfies Meta<typeof Nav>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: (args) => ({
+		components: { Nav, NavItem },
+		setup() {
+			return { args };
+		},
+		template: `
+			<Nav v-bind="args">
+				<NavItem href="#">Home</NavItem>
+				<NavItem href="#" active>About</NavItem>
+				<NavItem href="#">Contact</NavItem>
+				<NavItem href="#" disabled>Disabled</NavItem>
+			</Nav>
+		`,
+	}),
+};
+
+export const AllVariants: StoryObj = {
+	render: () => ({
+		components: { NavGrid },
+		template: "<NavGrid />",
+	}),
+};
+
+export const AllSizes: StoryObj = {
+	render: () => ({
+		components: { NavSizeGrid },
+		template: "<NavSizeGrid />",
+	}),
+};
+
+// Orientation stories
+
+export const Horizontal: Story = {
+	args: {
+		orientation: "horizontal",
+	},
+	render: (args) => ({
+		components: { Nav, NavItem },
+		setup() {
+			return { args };
+		},
+		template: `
+			<Nav v-bind="args">
+				<NavItem href="#">Home</NavItem>
+				<NavItem href="#" active>About</NavItem>
+				<NavItem href="#">Contact</NavItem>
+			</Nav>
+		`,
+	}),
+};
+
+export const Vertical: Story = {
+	args: {
+		orientation: "vertical",
+	},
+	render: (args) => ({
+		components: { Nav, NavItem },
+		setup() {
+			return { args };
+		},
+		template: `
+			<Nav v-bind="args">
+				<NavItem href="#">Home</NavItem>
+				<NavItem href="#" active>About</NavItem>
+				<NavItem href="#">Contact</NavItem>
+			</Nav>
+		`,
+	}),
+};
+
+// Color stories
+
+export const Light: Story = {
+	render: () => ({
+		components: { Nav, NavItem },
+		template: `
+			<Nav>
+				<NavItem color="light" href="#">Home</NavItem>
+				<NavItem color="light" href="#" active>About</NavItem>
+				<NavItem color="light" href="#">Contact</NavItem>
+			</Nav>
+		`,
+	}),
+};
+
+export const Dark: Story = {
+	render: () => ({
+		components: { Nav, NavItem },
+		template: `
+			<Nav>
+				<NavItem color="dark" href="#">Home</NavItem>
+				<NavItem color="dark" href="#" active>About</NavItem>
+				<NavItem color="dark" href="#">Contact</NavItem>
+			</Nav>
+		`,
+	}),
+};
+
+export const Neutral: Story = {
+	render: () => ({
+		components: { Nav, NavItem },
+		template: `
+			<Nav>
+				<NavItem color="neutral" href="#">Home</NavItem>
+				<NavItem color="neutral" href="#" active>About</NavItem>
+				<NavItem color="neutral" href="#">Contact</NavItem>
+			</Nav>
+		`,
+	}),
+};
+
+// Variant stories
+
+export const Ghost: Story = {
+	render: () => ({
+		components: { Nav, NavItem },
+		template: `
+			<Nav>
+				<NavItem variant="ghost" href="#">Home</NavItem>
+				<NavItem variant="ghost" href="#" active>About</NavItem>
+				<NavItem variant="ghost" href="#">Contact</NavItem>
+			</Nav>
+		`,
+	}),
+};
+
+export const Link: Story = {
+	render: () => ({
+		components: { Nav, NavItem },
+		template: `
+			<Nav>
+				<NavItem variant="link" href="#">Home</NavItem>
+				<NavItem variant="link" href="#" active>About</NavItem>
+				<NavItem variant="link" href="#">Contact</NavItem>
+			</Nav>
+		`,
+	}),
+};
+
+// Size stories
+
+export const Small: Story = {
+	args: {
+		size: "sm",
+	},
+	render: (args) => ({
+		components: { Nav, NavItem },
+		setup() {
+			return { args };
+		},
+		template: `
+			<Nav v-bind="args">
+				<NavItem size="sm" href="#">Home</NavItem>
+				<NavItem size="sm" href="#" active>About</NavItem>
+				<NavItem size="sm" href="#">Contact</NavItem>
+			</Nav>
+		`,
+	}),
+};
+
+export const Medium: Story = {
+	args: {
+		size: "md",
+	},
+	render: (args) => ({
+		components: { Nav, NavItem },
+		setup() {
+			return { args };
+		},
+		template: `
+			<Nav v-bind="args">
+				<NavItem size="md" href="#">Home</NavItem>
+				<NavItem size="md" href="#" active>About</NavItem>
+				<NavItem size="md" href="#">Contact</NavItem>
+			</Nav>
+		`,
+	}),
+};
+
+export const Large: Story = {
+	args: {
+		size: "lg",
+	},
+	render: (args) => ({
+		components: { Nav, NavItem },
+		setup() {
+			return { args };
+		},
+		template: `
+			<Nav v-bind="args">
+				<NavItem size="lg" href="#">Home</NavItem>
+				<NavItem size="lg" href="#" active>About</NavItem>
+				<NavItem size="lg" href="#">Contact</NavItem>
+			</Nav>
+		`,
+	}),
+};
+
+// Feature stories
+
+export const Active: Story = {
+	render: () => ({
+		components: { Nav, NavItem },
+		template: `
+			<Nav>
+				<NavItem href="#">Home</NavItem>
+				<NavItem href="#" active>Active Item</NavItem>
+				<NavItem href="#">Contact</NavItem>
+			</Nav>
+		`,
+	}),
+};
+
+export const Disabled: Story = {
+	render: () => ({
+		components: { Nav, NavItem },
+		template: `
+			<Nav>
+				<NavItem href="#">Home</NavItem>
+				<NavItem href="#" disabled>Disabled Item</NavItem>
+				<NavItem href="#">Contact</NavItem>
+			</Nav>
+		`,
+	}),
+};
diff --git a/apps/storybook/stories/components/nav.styleframe.ts b/apps/storybook/stories/components/nav.styleframe.ts
new file mode 100644
index 00000000..044ecf89
--- /dev/null
+++ b/apps/storybook/stories/components/nav.styleframe.ts
@@ -0,0 +1,39 @@
+import { useNavRecipe, useNavItemRecipe } from "@styleframe/theme";
+import { styleframe } from "virtual:styleframe";
+
+const s = styleframe();
+const { selector } = s;
+
+export const nav = useNavRecipe(s);
+export const navItem = useNavItemRecipe(s);
+
+// Layout selectors for story grid previews
+selector(".nav-grid", {
+	display: "flex",
+	flexWrap: "wrap",
+	gap: "@spacing.md",
+	padding: "@spacing.md",
+	alignItems: "flex-start",
+});
+
+selector(".nav-section", {
+	display: "flex",
+	flexDirection: "column",
+	gap: "@spacing.lg",
+	padding: "@spacing.md",
+});
+
+selector(".nav-row", {
+	display: "flex",
+	flexWrap: "wrap",
+	gap: "@spacing.sm",
+	alignItems: "flex-start",
+});
+
+selector(".nav-label", {
+	fontSize: "@font-size.sm",
+	fontWeight: "@font-weight.semibold",
+	minWidth: "80px",
+});
+
+export default s;
diff --git a/theme/src/presets/useUtilitiesPreset.ts b/theme/src/presets/useUtilitiesPreset.ts
index c8233129..8b931ef3 100644
--- a/theme/src/presets/useUtilitiesPreset.ts
+++ b/theme/src/presets/useUtilitiesPreset.ts
@@ -437,6 +437,7 @@ import {
 	useListStyleImageUtility,
 	useListStylePositionUtility,
 	useListStyleTypeUtility,
+	useListStyleUtility,
 	useOverflowWrapUtility,
 	useTextAlignUtility,
 	useTextColorUtility,
@@ -1523,6 +1524,8 @@ export function useUtilitiesPreset(
 	);
 	if (hyphens) createHyphensUtility(hyphens);
 
+	const createListStyleUtility = useListStyleUtility(s);
+
 	const createListStylePositionUtility = useListStylePositionUtility(
 		s,
 		undefined,
@@ -2876,6 +2879,7 @@ export function useUtilitiesPreset(
 			undefined,
 			resolveUtilityOptions("line-height"),
 		),
+		createListStyleUtility,
 		createListStyleImageUtility: useListStyleImageUtility(
 			s,
 			undefined,
diff --git a/theme/src/recipes/index.ts b/theme/src/recipes/index.ts
index 7bd04bf0..cd9443ac 100644
--- a/theme/src/recipes/index.ts
+++ b/theme/src/recipes/index.ts
@@ -3,3 +3,4 @@ export * from "./button";
 export * from "./button-group";
 export * from "./callout";
 export * from "./card";
+export * from "./nav";
diff --git a/theme/src/recipes/nav/index.ts b/theme/src/recipes/nav/index.ts
new file mode 100644
index 00000000..d07a8983
--- /dev/null
+++ b/theme/src/recipes/nav/index.ts
@@ -0,0 +1,2 @@
+export * from "./useNavRecipe";
+export * from "./useNavItemRecipe";
diff --git a/theme/src/recipes/nav/useNavItemRecipe.test.ts b/theme/src/recipes/nav/useNavItemRecipe.test.ts
new file mode 100644
index 00000000..f243be33
--- /dev/null
+++ b/theme/src/recipes/nav/useNavItemRecipe.test.ts
@@ -0,0 +1,466 @@
+import { styleframe } from "@styleframe/core";
+import { useDarkModifier } from "../../modifiers/useMediaPreferenceModifiers";
+import {
+	useHoverModifier,
+	useFocusModifier,
+	useFocusVisibleModifier,
+	useActiveModifier,
+} from "../../modifiers/usePseudoStateModifiers";
+import { useDisabledModifier } from "../../modifiers/useFormStateModifiers";
+import { useNavItemRecipe } from "./index";
+
+function createInstance() {
+	const s = styleframe();
+	for (const name of [
+		"display",
+		"alignItems",
+		"cursor",
+		"background",
+		"fontWeight",
+		"lineHeight",
+		"textDecoration",
+		"transitionProperty",
+		"transitionTimingFunction",
+		"transitionDuration",
+		"outline",
+		"outlineWidth",
+		"outlineStyle",
+		"outlineColor",
+		"outlineOffset",
+		"opacity",
+		"pointerEvents",
+		"fontSize",
+		"paddingTop",
+		"paddingBottom",
+		"paddingLeft",
+		"paddingRight",
+		"color",
+		"borderColor",
+		"borderWidth",
+		"borderRadius",
+		"textUnderlineOffset",
+	]) {
+		s.utility(name, ({ value }) => ({ [name]: value }));
+	}
+	useDarkModifier(s);
+	useHoverModifier(s);
+	useFocusModifier(s);
+	useFocusVisibleModifier(s);
+	useActiveModifier(s);
+	useDisabledModifier(s);
+	return s;
+}
+
+describe("useNavItemRecipe", () => {
+	it("should create a recipe with correct metadata", () => {
+		const s = createInstance();
+		const recipe = useNavItemRecipe(s);
+
+		expect(recipe.type).toBe("recipe");
+		expect(recipe.name).toBe("nav-item");
+	});
+
+	it("should have correct base styles", () => {
+		const s = createInstance();
+		const recipe = useNavItemRecipe(s);
+
+		expect(recipe.base).toEqual({
+			display: "inline-flex",
+			alignItems: "center",
+			cursor: "pointer",
+			background: "transparent",
+			fontWeight: "@font-weight.normal",
+			lineHeight: "@line-height.normal",
+			textDecoration: "none",
+			transitionProperty: "color, background-color",
+			transitionTimingFunction: "@easing.ease-in-out",
+			transitionDuration: "150ms",
+			outline: "none",
+			"&:hover": {
+				textDecoration: "none",
+			},
+			"&:focus": {
+				textDecoration: "none",
+			},
+			"&:focus-visible": {
+				outlineWidth: "2px",
+				outlineStyle: "solid",
+				outlineColor: "@color.primary",
+				outlineOffset: "2px",
+			},
+			"&:disabled": {
+				cursor: "not-allowed",
+				opacity: "0.5",
+				pointerEvents: "none",
+			},
+		});
+	});
+
+	describe("variants", () => {
+		it("should have all color variants", () => {
+			const s = createInstance();
+			const recipe = useNavItemRecipe(s);
+
+			expect(Object.keys(recipe.variants!.color)).toEqual([
+				"light",
+				"dark",
+				"neutral",
+			]);
+		});
+
+		it("should have all style variants", () => {
+			const s = createInstance();
+			const recipe = useNavItemRecipe(s);
+
+			expect(Object.keys(recipe.variants!.variant)).toEqual(["ghost", "link"]);
+		});
+
+		it("should have size variants with correct styles", () => {
+			const s = createInstance();
+			const recipe = useNavItemRecipe(s);
+
+			expect(recipe.variants!.size).toEqual({
+				sm: {
+					fontSize: "@font-size.xs",
+					paddingTop: "@0.25",
+					paddingBottom: "@0.25",
+					paddingLeft: "@0.5",
+					paddingRight: "@0.5",
+				},
+				md: {
+					fontSize: "@font-size.sm",
+					paddingTop: "@0.375",
+					paddingBottom: "@0.375",
+					paddingLeft: "@0.75",
+					paddingRight: "@0.75",
+				},
+				lg: {
+					fontSize: "@font-size.md",
+					paddingTop: "@0.5",
+					paddingBottom: "@0.5",
+					paddingLeft: "@1",
+					paddingRight: "@1",
+				},
+			});
+		});
+	});
+
+	it("should have active variants", () => {
+		const s = createInstance();
+		const recipe = useNavItemRecipe(s);
+
+		expect(recipe.variants!.active).toEqual({
+			true: {
+				fontWeight: "@font-weight.semibold",
+			},
+			false: {},
+		});
+	});
+
+	it("should have disabled variants", () => {
+		const s = createInstance();
+		const recipe = useNavItemRecipe(s);
+
+		expect(recipe.variants!.disabled).toEqual({
+			true: {
+				cursor: "not-allowed",
+				opacity: "0.5",
+				pointerEvents: "none",
+			},
+			false: {},
+		});
+	});
+
+	it("should have correct default variants", () => {
+		const s = createInstance();
+		const recipe = useNavItemRecipe(s);
+
+		expect(recipe.defaultVariants).toEqual({
+			color: "neutral",
+			variant: "ghost",
+			size: "md",
+			active: "false",
+			disabled: "false",
+		});
+	});
+
+	describe("compound variants", () => {
+		it("should have 6 compound variants total", () => {
+			const s = createInstance();
+			const recipe = useNavItemRecipe(s);
+
+			// 3 colors × 2 variants = 6
+			expect(recipe.compoundVariants).toHaveLength(6);
+		});
+
+		it("should have correct light ghost compound variant", () => {
+			const s = createInstance();
+			const recipe = useNavItemRecipe(s);
+
+			const lightGhost = recipe.compoundVariants!.find(
+				(cv) => cv.match.color === "light" && cv.match.variant === "ghost",
+			);
+
+			expect(lightGhost).toEqual({
+				match: { color: "light", variant: "ghost" },
+				css: {
+					color: "@color.text",
+					"&:hover": {
+						color: "@color.text",
+						background: "@color.gray-100",
+					},
+					"&:focus": {
+						color: "@color.text",
+						background: "@color.gray-100",
+					},
+					"&:active": {
+						background: "@color.gray-200",
+					},
+					"&:dark": {
+						color: "@color.text-inverted",
+					},
+					"&:dark:hover": {
+						color: "@color.text-inverted",
+						background: "@color.gray-100",
+					},
+					"&:dark:focus": {
+						color: "@color.text-inverted",
+						background: "@color.gray-100",
+					},
+					"&:dark:active": {
+						background: "@color.gray-200",
+					},
+				},
+			});
+		});
+
+		it("should have correct light link compound variant", () => {
+			const s = createInstance();
+			const recipe = useNavItemRecipe(s);
+
+			const lightLink = recipe.compoundVariants!.find(
+				(cv) => cv.match.color === "light" && cv.match.variant === "link",
+			);
+
+			expect(lightLink).toEqual({
+				match: { color: "light", variant: "link" },
+				css: {
+					color: "@color.text",
+					"&:hover": {
+						color: "@color.gray-900",
+						textDecoration: "underline",
+						textUnderlineOffset: "4px",
+					},
+					"&:focus": {
+						color: "@color.gray-900",
+						textDecoration: "underline",
+						textUnderlineOffset: "4px",
+					},
+					"&:active": {
+						color: "@color.gray-900",
+						textDecoration: "underline",
+						textUnderlineOffset: "4px",
+					},
+					"&:dark": {
+						color: "@color.text-inverted",
+					},
+					"&:dark:hover": {
+						color: "@color.gray-900",
+					},
+					"&:dark:focus": {
+						color: "@color.gray-900",
+					},
+					"&:dark:active": {
+						color: "@color.gray-900",
+					},
+				},
+			});
+		});
+
+		it("should have correct dark ghost compound variant", () => {
+			const s = createInstance();
+			const recipe = useNavItemRecipe(s);
+
+			const darkGhost = recipe.compoundVariants!.find(
+				(cv) => cv.match.color === "dark" && cv.match.variant === "ghost",
+			);
+
+			expect(darkGhost).toEqual({
+				match: { color: "dark", variant: "ghost" },
+				css: {
+					color: "@color.gray-200",
+					"&:hover": {
+						color: "@color.gray-200",
+						background: "@color.gray-800",
+					},
+					"&:focus": {
+						color: "@color.gray-200",
+						background: "@color.gray-800",
+					},
+					"&:active": {
+						background: "@color.gray-750",
+					},
+					"&:dark": {
+						color: "@color.gray-200",
+					},
+					"&:dark:hover": {
+						color: "@color.gray-200",
+						background: "@color.gray-800",
+					},
+					"&:dark:focus": {
+						color: "@color.gray-200",
+						background: "@color.gray-800",
+					},
+					"&:dark:active": {
+						background: "@color.gray-750",
+					},
+				},
+			});
+		});
+
+		it("should have correct neutral ghost compound variant with adaptive dark mode", () => {
+			const s = createInstance();
+			const recipe = useNavItemRecipe(s);
+
+			const neutralGhost = recipe.compoundVariants!.find(
+				(cv) => cv.match.color === "neutral" && cv.match.variant === "ghost",
+			);
+
+			expect(neutralGhost).toEqual({
+				match: { color: "neutral", variant: "ghost" },
+				css: {
+					color: "@color.text",
+					"&:hover": {
+						color: "@color.text",
+						background: "@color.gray-100",
+					},
+					"&:focus": {
+						color: "@color.text",
+						background: "@color.gray-100",
+					},
+					"&:active": {
+						background: "@color.gray-200",
+					},
+					"&:dark": {
+						color: "@color.gray-200",
+					},
+					"&:dark:hover": {
+						color: "@color.gray-200",
+						background: "@color.gray-800",
+					},
+					"&:dark:focus": {
+						color: "@color.gray-200",
+						background: "@color.gray-800",
+					},
+					"&:dark:active": {
+						background: "@color.gray-750",
+					},
+				},
+			});
+		});
+
+		it("should have correct neutral link compound variant with adaptive dark mode", () => {
+			const s = createInstance();
+			const recipe = useNavItemRecipe(s);
+
+			const neutralLink = recipe.compoundVariants!.find(
+				(cv) => cv.match.color === "neutral" && cv.match.variant === "link",
+			);
+
+			expect(neutralLink).toEqual({
+				match: { color: "neutral", variant: "link" },
+				css: {
+					color: "@color.text",
+					"&:hover": {
+						color: "@color.gray-900",
+						textDecoration: "underline",
+						textUnderlineOffset: "4px",
+					},
+					"&:focus": {
+						color: "@color.gray-900",
+						textDecoration: "underline",
+						textUnderlineOffset: "4px",
+					},
+					"&:active": {
+						color: "@color.gray-900",
+						textDecoration: "underline",
+						textUnderlineOffset: "4px",
+					},
+					"&:dark": {
+						color: "@color.gray-200",
+					},
+					"&:dark:hover": {
+						color: "@color.white",
+					},
+					"&:dark:focus": {
+						color: "@color.white",
+					},
+					"&:dark:active": {
+						color: "@color.white",
+					},
+				},
+			});
+		});
+	});
+
+	describe("config overrides", () => {
+		it("should allow overriding base styles", () => {
+			const s = createInstance();
+			const recipe = useNavItemRecipe(s, {
+				base: { display: "flex" },
+			});
+
+			expect(recipe.base!.display).toBe("flex");
+			expect(recipe.base!.cursor).toBe("pointer");
+		});
+	});
+
+	describe("filter", () => {
+		it("should filter color variants", () => {
+			const s = createInstance();
+			const recipe = useNavItemRecipe(s, {
+				filter: { color: ["neutral"] },
+			});
+
+			expect(Object.keys(recipe.variants!.color)).toEqual(["neutral"]);
+		});
+
+		it("should prune compound variants when filtering colors", () => {
+			const s = createInstance();
+			const recipe = useNavItemRecipe(s, {
+				filter: { color: ["neutral"] },
+			});
+
+			expect(
+				recipe.compoundVariants!.every(
+					(cv) => !cv.match.color || cv.match.color === "neutral",
+				),
+			).toBe(true);
+		});
+
+		it("should filter variant axis", () => {
+			const s = createInstance();
+			const recipe = useNavItemRecipe(s, {
+				filter: { variant: ["ghost"] },
+			});
+
+			expect(Object.keys(recipe.variants!.variant)).toEqual(["ghost"]);
+			expect(
+				recipe.compoundVariants!.every(
+					(cv) => !cv.match.variant || cv.match.variant === "ghost",
+				),
+			).toBe(true);
+		});
+
+		it("should adjust default variants when filtered out", () => {
+			const s = createInstance();
+			const recipe = useNavItemRecipe(s, {
+				filter: { color: ["light"] },
+			});
+
+			expect(recipe.defaultVariants?.color).toBeUndefined();
+			expect(recipe.defaultVariants?.variant).toBe("ghost");
+			expect(recipe.defaultVariants?.size).toBe("md");
+		});
+	});
+});
diff --git a/theme/src/recipes/nav/useNavItemRecipe.ts b/theme/src/recipes/nav/useNavItemRecipe.ts
new file mode 100644
index 00000000..9a11dc68
--- /dev/null
+++ b/theme/src/recipes/nav/useNavItemRecipe.ts
@@ -0,0 +1,296 @@
+import { createUseRecipe } from "../../utils/createUseRecipe";
+
+/**
+ * Nav item recipe for individual navigation links.
+ * Supports color (light, dark, neutral), variant (ghost, link), and size axes.
+ */
+export const useNavItemRecipe = createUseRecipe("nav-item", {
+	base: {
+		display: "inline-flex",
+		alignItems: "center",
+		cursor: "pointer",
+		background: "transparent",
+		fontWeight: "@font-weight.normal",
+		lineHeight: "@line-height.normal",
+		textDecoration: "none",
+		transitionProperty: "color, background-color",
+		transitionTimingFunction: "@easing.ease-in-out",
+		transitionDuration: "150ms",
+		outline: "none",
+		"&:hover": {
+			textDecoration: "none",
+		},
+		"&:focus": {
+			textDecoration: "none",
+		},
+		"&:focus-visible": {
+			outlineWidth: "2px",
+			outlineStyle: "solid",
+			outlineColor: "@color.primary",
+			outlineOffset: "2px",
+		},
+		"&:disabled": {
+			cursor: "not-allowed",
+			opacity: "0.5",
+			pointerEvents: "none",
+		},
+	},
+	variants: {
+		color: {
+			light: {},
+			dark: {},
+			neutral: {},
+		},
+		variant: {
+			ghost: {
+				borderRadius: "@border-radius.md",
+			},
+			link: {
+				background: "transparent",
+			},
+		},
+		size: {
+			sm: {
+				fontSize: "@font-size.xs",
+				paddingTop: "@0.25",
+				paddingBottom: "@0.25",
+				paddingLeft: "@0.5",
+				paddingRight: "@0.5",
+			},
+			md: {
+				fontSize: "@font-size.sm",
+				paddingTop: "@0.375",
+				paddingBottom: "@0.375",
+				paddingLeft: "@0.75",
+				paddingRight: "@0.75",
+			},
+			lg: {
+				fontSize: "@font-size.md",
+				paddingTop: "@0.5",
+				paddingBottom: "@0.5",
+				paddingLeft: "@1",
+				paddingRight: "@1",
+			},
+		},
+		active: {
+			true: {
+				fontWeight: "@font-weight.semibold",
+			},
+			false: {},
+		},
+		disabled: {
+			true: {
+				cursor: "not-allowed",
+				opacity: "0.5",
+				pointerEvents: "none",
+			},
+			false: {},
+		},
+	},
+	compoundVariants: [
+		// Light color (fixed across themes — always dark text for light backgrounds)
+		{
+			match: { color: "light" as const, variant: "ghost" as const },
+			css: {
+				color: "@color.text",
+				"&:hover": {
+					color: "@color.text",
+					background: "@color.gray-100",
+				},
+				"&:focus": {
+					color: "@color.text",
+					background: "@color.gray-100",
+				},
+				"&:active": {
+					background: "@color.gray-200",
+				},
+				"&:dark": {
+					color: "@color.text-inverted",
+				},
+				"&:dark:hover": {
+					color: "@color.text-inverted",
+					background: "@color.gray-100",
+				},
+				"&:dark:focus": {
+					color: "@color.text-inverted",
+					background: "@color.gray-100",
+				},
+				"&:dark:active": {
+					background: "@color.gray-200",
+				},
+			},
+		},
+		{
+			match: { color: "light" as const, variant: "link" as const },
+			css: {
+				color: "@color.text",
+				"&:hover": {
+					color: "@color.gray-900",
+					textDecoration: "underline",
+					textUnderlineOffset: "4px",
+				},
+				"&:focus": {
+					color: "@color.gray-900",
+					textDecoration: "underline",
+					textUnderlineOffset: "4px",
+				},
+				"&:active": {
+					color: "@color.gray-900",
+					textDecoration: "underline",
+					textUnderlineOffset: "4px",
+				},
+				"&:dark": {
+					color: "@color.text-inverted",
+				},
+				"&:dark:hover": {
+					color: "@color.gray-900",
+				},
+				"&:dark:focus": {
+					color: "@color.gray-900",
+				},
+				"&:dark:active": {
+					color: "@color.gray-900",
+				},
+			},
+		},
+
+		// Dark color (fixed across themes — matches neutral's dark mode appearance)
+		{
+			match: { color: "dark" as const, variant: "ghost" as const },
+			css: {
+				color: "@color.gray-200",
+				"&:hover": {
+					color: "@color.gray-200",
+					background: "@color.gray-800",
+				},
+				"&:focus": {
+					color: "@color.gray-200",
+					background: "@color.gray-800",
+				},
+				"&:active": {
+					background: "@color.gray-750",
+				},
+				"&:dark": {
+					color: "@color.gray-200",
+				},
+				"&:dark:hover": {
+					color: "@color.gray-200",
+					background: "@color.gray-800",
+				},
+				"&:dark:focus": {
+					color: "@color.gray-200",
+					background: "@color.gray-800",
+				},
+				"&:dark:active": {
+					background: "@color.gray-750",
+				},
+			},
+		},
+		{
+			match: { color: "dark" as const, variant: "link" as const },
+			css: {
+				color: "@color.gray-200",
+				"&:hover": {
+					color: "@color.white",
+					textDecoration: "underline",
+					textUnderlineOffset: "4px",
+				},
+				"&:focus": {
+					color: "@color.white",
+					textDecoration: "underline",
+					textUnderlineOffset: "4px",
+				},
+				"&:active": {
+					color: "@color.white",
+					textDecoration: "underline",
+					textUnderlineOffset: "4px",
+				},
+				"&:dark": {
+					color: "@color.gray-200",
+				},
+				"&:dark:hover": {
+					color: "@color.white",
+				},
+				"&:dark:focus": {
+					color: "@color.white",
+				},
+				"&:dark:active": {
+					color: "@color.white",
+				},
+			},
+		},
+
+		// Neutral color (adaptive: light in light mode, dark in dark mode)
+		{
+			match: { color: "neutral" as const, variant: "ghost" as const },
+			css: {
+				color: "@color.text",
+				"&:hover": {
+					color: "@color.text",
+					background: "@color.gray-100",
+				},
+				"&:focus": {
+					color: "@color.text",
+					background: "@color.gray-100",
+				},
+				"&:active": {
+					background: "@color.gray-200",
+				},
+				"&:dark": {
+					color: "@color.gray-200",
+				},
+				"&:dark:hover": {
+					color: "@color.gray-200",
+					background: "@color.gray-800",
+				},
+				"&:dark:focus": {
+					color: "@color.gray-200",
+					background: "@color.gray-800",
+				},
+				"&:dark:active": {
+					background: "@color.gray-750",
+				},
+			},
+		},
+		{
+			match: { color: "neutral" as const, variant: "link" as const },
+			css: {
+				color: "@color.text",
+				"&:hover": {
+					color: "@color.gray-900",
+					textDecoration: "underline",
+					textUnderlineOffset: "4px",
+				},
+				"&:focus": {
+					color: "@color.gray-900",
+					textDecoration: "underline",
+					textUnderlineOffset: "4px",
+				},
+				"&:active": {
+					color: "@color.gray-900",
+					textDecoration: "underline",
+					textUnderlineOffset: "4px",
+				},
+				"&:dark": {
+					color: "@color.gray-200",
+				},
+				"&:dark:hover": {
+					color: "@color.white",
+				},
+				"&:dark:focus": {
+					color: "@color.white",
+				},
+				"&:dark:active": {
+					color: "@color.white",
+				},
+			},
+		},
+	],
+	defaultVariants: {
+		color: "neutral",
+		variant: "ghost",
+		size: "md",
+		active: "false",
+		disabled: "false",
+	},
+});
diff --git a/theme/src/recipes/nav/useNavRecipe.test.ts b/theme/src/recipes/nav/useNavRecipe.test.ts
new file mode 100644
index 00000000..c9b87505
--- /dev/null
+++ b/theme/src/recipes/nav/useNavRecipe.test.ts
@@ -0,0 +1,186 @@
+import { styleframe } from "@styleframe/core";
+import { useNavRecipe } from "./index";
+
+function createInstance() {
+	const s = styleframe();
+	for (const name of [
+		"display",
+		"flexWrap",
+		"alignItems",
+		"listStyle",
+		"paddingLeft",
+		"marginTop",
+		"marginBottom",
+		"flexDirection",
+		"fontSize",
+		"gap",
+	]) {
+		s.utility(name, ({ value }) => ({ [name]: value }));
+	}
+	return s;
+}
+
+describe("useNavRecipe", () => {
+	it("should create a recipe with correct metadata", () => {
+		const s = createInstance();
+		const recipe = useNavRecipe(s);
+
+		expect(recipe.type).toBe("recipe");
+		expect(recipe.name).toBe("nav");
+	});
+
+	it("should have correct base styles", () => {
+		const s = createInstance();
+		const recipe = useNavRecipe(s);
+
+		expect(recipe.base).toEqual({
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "center",
+			listStyle: "none",
+			paddingLeft: "0",
+			marginTop: "0",
+			marginBottom: "0",
+		});
+	});
+
+	describe("variants", () => {
+		it("should have orientation variants", () => {
+			const s = createInstance();
+			const recipe = useNavRecipe(s);
+
+			expect(recipe.variants!.orientation).toEqual({
+				horizontal: {
+					flexDirection: "row",
+				},
+				vertical: {
+					flexDirection: "column",
+					alignItems: "flex-start",
+				},
+			});
+		});
+
+		it("should have size variants with correct styles", () => {
+			const s = createInstance();
+			const recipe = useNavRecipe(s);
+
+			expect(recipe.variants!.size).toEqual({
+				sm: {
+					fontSize: "@font-size.xs",
+					gap: "@0.25",
+				},
+				md: {
+					fontSize: "@font-size.sm",
+					gap: "@0.5",
+				},
+				lg: {
+					fontSize: "@font-size.md",
+					gap: "@0.75",
+				},
+			});
+		});
+	});
+
+	it("should have correct default variants", () => {
+		const s = createInstance();
+		const recipe = useNavRecipe(s);
+
+		expect(recipe.defaultVariants).toEqual({
+			orientation: "horizontal",
+			size: "md",
+		});
+	});
+
+	describe("compound variants", () => {
+		it("should have 2 compound variants total", () => {
+			const s = createInstance();
+			const recipe = useNavRecipe(s);
+
+			expect(recipe.compoundVariants).toHaveLength(2);
+		});
+
+		it("should have horizontal className compound variant", () => {
+			const s = createInstance();
+			const recipe = useNavRecipe(s);
+
+			const horizontal = recipe.compoundVariants!.find(
+				(cv) => cv.match.orientation === "horizontal",
+			);
+
+			expect(horizontal).toEqual({
+				match: { orientation: "horizontal" },
+				className: "-horizontal",
+			});
+		});
+
+		it("should have vertical className compound variant", () => {
+			const s = createInstance();
+			const recipe = useNavRecipe(s);
+
+			const vertical = recipe.compoundVariants!.find(
+				(cv) => cv.match.orientation === "vertical",
+			);
+
+			expect(vertical).toEqual({
+				match: { orientation: "vertical" },
+				className: "-vertical",
+			});
+		});
+	});
+
+	describe("config overrides", () => {
+		it("should allow overriding base styles", () => {
+			const s = createInstance();
+			const recipe = useNavRecipe(s, {
+				base: { display: "inline-flex" },
+			});
+
+			expect(recipe.base!.display).toBe("inline-flex");
+			expect(recipe.base!.flexWrap).toBe("wrap");
+			expect(recipe.base!.listStyle).toBe("none");
+		});
+	});
+
+	describe("filter", () => {
+		it("should filter orientation variants", () => {
+			const s = createInstance();
+			const recipe = useNavRecipe(s, {
+				filter: { orientation: ["horizontal"] },
+			});
+
+			expect(Object.keys(recipe.variants!.orientation)).toEqual(["horizontal"]);
+		});
+
+		it("should prune compound variants when filtering orientation", () => {
+			const s = createInstance();
+			const recipe = useNavRecipe(s, {
+				filter: { orientation: ["horizontal"] },
+			});
+
+			const orientationCompounds = recipe.compoundVariants!.filter(
+				(cv) => cv.match.orientation !== undefined,
+			);
+			expect(orientationCompounds).toHaveLength(1);
+			expect(orientationCompounds[0]!.match.orientation).toBe("horizontal");
+		});
+
+		it("should filter size variants", () => {
+			const s = createInstance();
+			const recipe = useNavRecipe(s, {
+				filter: { size: ["sm", "lg"] },
+			});
+
+			expect(Object.keys(recipe.variants!.size)).toEqual(["sm", "lg"]);
+		});
+
+		it("should adjust default variants when filtered out", () => {
+			const s = createInstance();
+			const recipe = useNavRecipe(s, {
+				filter: { orientation: ["vertical"] },
+			});
+
+			expect(recipe.defaultVariants?.orientation).toBeUndefined();
+			expect(recipe.defaultVariants?.size).toBe("md");
+		});
+	});
+});
diff --git a/theme/src/recipes/nav/useNavRecipe.ts b/theme/src/recipes/nav/useNavRecipe.ts
new file mode 100644
index 00000000..2abaf550
--- /dev/null
+++ b/theme/src/recipes/nav/useNavRecipe.ts
@@ -0,0 +1,56 @@
+import { createUseRecipe } from "../../utils/createUseRecipe";
+
+/**
+ * Nav container recipe for navigation lists.
+ * Supports orientation (horizontal/vertical) and size axes.
+ */
+export const useNavRecipe = createUseRecipe("nav", {
+	base: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		listStyle: "none",
+		paddingLeft: "0",
+		marginTop: "0",
+		marginBottom: "0",
+	},
+	variants: {
+		orientation: {
+			horizontal: {
+				flexDirection: "row",
+			},
+			vertical: {
+				flexDirection: "column",
+				alignItems: "flex-start",
+			},
+		},
+		size: {
+			sm: {
+				fontSize: "@font-size.xs",
+				gap: "@0.25",
+			},
+			md: {
+				fontSize: "@font-size.sm",
+				gap: "@0.5",
+			},
+			lg: {
+				fontSize: "@font-size.md",
+				gap: "@0.75",
+			},
+		},
+	},
+	compoundVariants: [
+		{
+			match: { orientation: "horizontal" as const },
+			className: "-horizontal",
+		},
+		{
+			match: { orientation: "vertical" as const },
+			className: "-vertical",
+		},
+	],
+	defaultVariants: {
+		orientation: "horizontal",
+		size: "md",
+	},
+});
diff --git a/theme/src/utilities/typography/useListStyleUtility.test.ts b/theme/src/utilities/typography/useListStyleUtility.test.ts
index 10cdf6fe..fa7a3c8b 100644
--- a/theme/src/utilities/typography/useListStyleUtility.test.ts
+++ b/theme/src/utilities/typography/useListStyleUtility.test.ts
@@ -5,8 +5,28 @@ import {
 	useListStyleImageUtility,
 	useListStylePositionUtility,
 	useListStyleTypeUtility,
+	useListStyleUtility,
 } from "./useListStyleUtility";
 
+describe("useListStyleUtility", () => {
+	it("should set correct declarations", () => {
+		const s = styleframe();
+		useListStyleUtility(s, { none: "none" });
+
+		const utility = s.root.children[0] as Utility;
+		expect(utility.declarations).toEqual({ listStyle: "none" });
+	});
+
+	it("should compile to correct CSS output", () => {
+		const s = styleframe();
+		useListStyleUtility(s, { none: "none" });
+
+		const css = consumeCSS(s.root, s.options);
+		expect(css).toContain("._list-style\\:none {");
+		expect(css).toContain("list-style: none;");
+	});
+});
+
 describe("useListStyleTypeUtility", () => {
 	it("should create utility instances with provided values", () => {
 		const s = styleframe();
diff --git a/theme/src/utilities/typography/useListStyleUtility.ts b/theme/src/utilities/typography/useListStyleUtility.ts
index 3fc1f005..11c5c555 100644
--- a/theme/src/utilities/typography/useListStyleUtility.ts
+++ b/theme/src/utilities/typography/useListStyleUtility.ts
@@ -1,6 +1,16 @@
 import { createUseUtility } from "../../utils";
 import { listStylePositionValues, listStyleTypeValues } from "../../values";
 
+/**
+ * Create list-style shorthand utility classes.
+ */
+export const useListStyleUtility = createUseUtility(
+	"list-style",
+	({ value }) => ({
+		listStyle: value,
+	}),
+);
+
 /**
  * Create list-style-image utility classes.
  */