diff --git a/playground/app/pages/components/navigation-menu.vue b/playground/app/pages/components/navigation-menu.vue
index b514639c..8600042b 100644
--- a/playground/app/pages/components/navigation-menu.vue
+++ b/playground/app/pages/components/navigation-menu.vue
@@ -10,9 +10,13 @@ const highlightColor = ref()
 const variant = ref(theme.defaultVariants.variant)
 const orientation = ref('vertical' as const)
 const highlight = ref(true)
+const collapsed = ref(false)
 
 const items = [
   [{
+    label: 'Link',
+    type: 'label' as const
+  }, {
     label: 'Documentation',
     icon: 'i-lucide-book-open',
     badge: 10,
@@ -40,33 +44,33 @@ const items = [
     defaultOpen: true,
     children: [{
       label: 'Link',
-      icon: 'i-lucide-file',
+      icon: 'i-lucide-link',
       description: 'Use NuxtLink with superpowers.',
       to: '/components/link'
     }, {
       label: 'Modal',
-      icon: 'i-lucide-file',
-      description: 'Display a modal within your application.',
+      icon: 'i-lucide-square',
+      description: 'Display a modal dialog overlay for important content.',
       to: '/components/modal'
     }, {
       label: 'NavigationMenu',
-      icon: 'i-lucide-file',
+      icon: 'i-lucide-list',
       description: 'Display a list of links.',
       to: '/components/navigation-menu',
       trailingIcon: 'i-lucide-check'
     }, {
       label: 'Pagination',
-      icon: 'i-lucide-file',
+      icon: 'i-lucide-parking-meter',
       description: 'Display a list of pages.',
       to: '/components/pagination'
     }, {
       label: 'Popover',
-      icon: 'i-lucide-file',
+      icon: 'i-lucide-message-circle',
       description: 'Display a non-modal dialog that floats around a trigger element.',
       to: '/components/popover'
     }, {
       label: 'Progress',
-      icon: 'i-lucide-file',
+      icon: 'i-lucide-loader',
       description: 'Show a horizontal bar to indicate task progression.',
       to: '/components/progress'
     }]
@@ -89,12 +93,14 @@ const items = [
       <USelect v-model="color" :items="colors" placeholder="Color" />
       <USelect v-model="variant" :items="variants" placeholder="Variant" />
       <USelect v-model="orientation" :items="orientations" placeholder="Orientation" />
+      <USwitch v-model="collapsed" label="Collapsed" />
       <USwitch v-model="highlight" label="Highlight" />
       <USelect v-model="highlightColor" :items="colors" placeholder="Highlight color" />
     </div>
 
     <UNavigationMenu
       arrow
+      :collapsed="collapsed"
       :items="items"
       :color="color"
       :variant="variant"
@@ -102,7 +108,7 @@ const items = [
       :highlight="highlight"
       :highlight-color="highlightColor"
       :class="highlight && 'data-[orientation=horizontal]:border-b border-[var(--ui-border)]'"
-      class="data-[orientation=vertical]:w-48"
+      class="data-[orientation=vertical]:data-[collapsed=false]:w-48"
     />
   </div>
 </template>
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index 2b4bed1e..6f5f71a8 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -61,6 +61,12 @@ export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'm
    * @defaultValue 'horizontal'
    */
   orientation?: NavigationMenuRootProps['orientation']
+  /**
+   * Collapse the navigation menu to only show icons.
+   * Only works when `orientation` is `vertical`.
+   * @defaultValue false
+   */
+  collapsed?: boolean
   /** Display a line next to the active item. */
   highlight?: boolean
   highlightColor?: NavigationMenuVariants['highlightColor']
@@ -173,6 +179,7 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: N
 
 const ui = computed(() => navigationMenu({
   orientation: props.orientation,
+  collapsed: props.collapsed,
   color: props.color,
   variant: props.variant,
   highlight: props.highlight,
@@ -190,7 +197,10 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
         <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active, disabled: !!item.disabled })" />
       </slot>
 
-      <span v-if="get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+      <span
+        v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
+        :class="ui.linkLabel({ class: props.ui?.linkLabel })"
+      >
         <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="(item as T)" :active="active" :index="index">
           {{ get(item, props.labelKey as string) }}
         </slot>
@@ -198,7 +208,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
         <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: props.ui?.linkLabelExternalIcon, active })" />
       </span>
 
-      <span v-if="item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
+      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing'])" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="(item as T)" :active="active" :index="index">
           <UBadge
             v-if="item.badge"
@@ -216,7 +226,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
     </slot>
   </DefineItemTemplate>
 
-  <NavigationMenuRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
       <NavigationMenuList :class="ui.list({ class: props.ui?.list })">
         <component
diff --git a/src/theme/navigation-menu.ts b/src/theme/navigation-menu.ts
index 75c6d6d2..2134ed70 100644
--- a/src/theme/navigation-menu.ts
+++ b/src/theme/navigation-menu.ts
@@ -60,9 +60,7 @@ export default (options: Required<ModuleOptions>) => ({
       },
       vertical: {
         root: 'flex-col',
-        link: 'flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0',
-        childList: 'ms-5 border-s border-[var(--ui-border)]',
-        childItem: 'ps-1.5 -ms-px'
+        link: 'flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0'
       }
     },
     active: {
@@ -87,6 +85,9 @@ export default (options: Required<ModuleOptions>) => ({
     },
     level: {
       true: ''
+    },
+    collapsed: {
+      true: ''
     }
   },
   compoundVariants: [{
@@ -216,6 +217,19 @@ export default (options: Required<ModuleOptions>) => ({
     class: {
       link: 'after:bg-[var(--ui-bg-inverted)]'
     }
+  }, {
+    orientation: 'vertical',
+    collapsed: false,
+    class: {
+      childList: 'ms-5 border-s border-[var(--ui-border)]',
+      childItem: 'ps-1.5 -ms-px'
+    }
+  }, {
+    orientation: 'vertical',
+    collapsed: true,
+    class: {
+      link: 'px-1.5'
+    }
   }],
   defaultVariants: {
     color: 'primary',
diff --git a/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap b/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
index e2589b99..7edce9f5 100644
--- a/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NavigationMenu > renders with arrow correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -47,7 +47,7 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with as correctly 1`] = `
-"<section aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<section aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -91,7 +91,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with class correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between w-48">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between w-48">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -135,7 +135,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with custom slot correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -179,7 +179,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item slot correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -217,7 +217,7 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -261,7 +261,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -305,7 +305,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -343,7 +343,7 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with items correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -387,7 +387,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with labelKey correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -431,7 +431,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -475,7 +475,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant link highlight correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -519,7 +519,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
 `;
 
 exports[`NavigationMenu > renders with neutral variant link highlight neutral correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -563,7 +563,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -607,7 +607,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill highlight correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -651,7 +651,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill highlight neutral correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -695,7 +695,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
 `;
 
 exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
-"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
+"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
       <li data-menu-item="" class="min-w-0">
@@ -741,7 +741,7 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -785,7 +785,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant link highlight correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -829,7 +829,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
 `;
 
 exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -873,7 +873,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant pill highlight correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -917,7 +917,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
 `;
 
 exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -961,7 +961,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with ui correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -1005,7 +1005,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
diff --git a/test/components/__snapshots__/NavigationMenu.spec.ts.snap b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
index c1564911..75fdd7de 100644
--- a/test/components/__snapshots__/NavigationMenu.spec.ts.snap
+++ b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NavigationMenu > renders with arrow correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -47,7 +47,7 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with as correctly 1`] = `
-"<section aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<section aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -91,7 +91,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with class correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between w-48">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between w-48">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -135,7 +135,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with custom slot correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -179,7 +179,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item slot correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -217,7 +217,7 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -261,7 +261,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -305,7 +305,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -343,7 +343,7 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with items correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -387,7 +387,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with labelKey correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -431,7 +431,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -475,7 +475,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant link highlight correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -519,7 +519,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
 `;
 
 exports[`NavigationMenu > renders with neutral variant link highlight neutral correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -563,7 +563,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -607,7 +607,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill highlight correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -651,7 +651,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill highlight neutral correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -695,7 +695,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
 `;
 
 exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
-"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
+"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
       <li data-menu-item="" class="min-w-0">
@@ -741,7 +741,7 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -785,7 +785,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant link highlight correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -829,7 +829,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
 `;
 
 exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -873,7 +873,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant pill highlight correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2 -mb-px"></li>
@@ -917,7 +917,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
 `;
 
 exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -961,7 +961,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with ui correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>
@@ -1005,7 +1005,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
-"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" class="min-w-0 py-2"></li>