diff --git a/docs/app/components/content/examples/dropdown-menu/DropdownMenuMatchContentWidthWithTriggerWidthExample.vue b/docs/app/components/content/examples/dropdown-menu/DropdownMenuMatchContentWidthWithTriggerWidthExample.vue
new file mode 100644
index 0000000000..be2b19d187
--- /dev/null
+++ b/docs/app/components/content/examples/dropdown-menu/DropdownMenuMatchContentWidthWithTriggerWidthExample.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+
+const items: DropdownMenuItem[][] = [
+  [
+    {
+      label: 'View',
+      icon: 'i-lucide-eye'
+    },
+    {
+      label: 'Copy',
+      icon: 'i-lucide-copy'
+    },
+    {
+      label: 'Edit',
+      icon: 'i-lucide-pencil'
+    }
+  ],
+  [
+    {
+      label: 'Delete',
+      color: 'error',
+      icon: 'i-lucide-trash'
+    }
+  ]
+]
+</script>
+
+<template>
+  <UDropdownMenu :items="items" :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width)' }">
+    <UButton
+      label="Open"
+      class="w-46"
+      color="neutral"
+      variant="outline"
+      block
+      trailing-icon="i-lucide-chevron-down"
+    />
+  </UDropdownMenu>
+</template>
diff --git a/docs/content/docs/2.components/dropdown-menu.md b/docs/content/docs/2.components/dropdown-menu.md
index 4de2512267..b4b4928167 100644
--- a/docs/content/docs/2.components/dropdown-menu.md
+++ b/docs/content/docs/2.components/dropdown-menu.md
@@ -382,6 +382,19 @@ defineShortcuts(extractShortcuts(items))
 In this example, :kbd{value="meta"} :kbd{value="E"}, :kbd{value="meta"} :kbd{value="I"} and :kbd{value="meta"} :kbd{value="N"} would trigger the `select` function of the corresponding item.
 ::
 
+### Match content & trigger width
+
+You can set `--reka-dropdown-menu-trigger-width` css variable as content width to match the trigger button width.
+
+::component-example
+---
+
+collapse: true
+name: 'dropdown-menu-match-content-width-with-trigger-width-example'
+---
+
+::
+
 ## API
 
 ### Props