docs(dropdown-menu): add trigger content width example

docs/app/components/content/examples/dropdown-menu/DropdownMenuContentWidthExample.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>

docs/content/docs/2.components/dropdown-menu.md

@@ -403,6 +403,33 @@ name: 'dropdown-menu-custom-slot-example'
 You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
 ::
 
+### With trigger content width
+
+You can expand the content to the full width of its button by adding the `w-(--reka-dropdown-menu-trigger-width)` class on the `ui.content` slot.
+
+::component-example
+---
+collapse: true
+name: 'dropdown-menu-content-width-example'
+---
+::
+
+::tip
+You can also change the content width globally in your `app.config.ts`:
+
+```
+export default defineAppConfig({
+  ui: {
+    dropdownMenu: {
+      slots: {
+        content: 'w-(--reka-dropdown-menu-trigger-width)'
+      }
+    }
+  }
+})
+```
+::
+
 ### Extract shortcuts
 
 When you have some items with `kbds` property (displaying some [Kbd](/docs/components/kbd)), you can easily make them work with the [defineShortcuts](/docs/composables/define-shortcuts) composable.

docs/content/docs/2.components/input-menu.md

@@ -784,7 +784,7 @@ name: 'input-menu-filter-fields-example'
 
 ### With full content width
 
-You can expand the content to the full width of its items by using the `ui.content` key.
+You can expand the content to the full width of its items by adding the `min-w-fit` class on the `ui.content` slot.
 
 ::component-example
 ---

docs/content/docs/2.components/select-menu.md

@@ -823,7 +823,7 @@ name: 'select-menu-filter-fields-example'
 
 ### With full content width
 
-You can expand the content to the full width of its items by using the `ui.content` key.
+You can expand the content to the full width of its items by adding the `min-w-fit` class on the `ui.content` slot.
 
 ::component-example
 ---

docs/content/docs/2.components/select.md

@@ -726,7 +726,7 @@ collapse: true
 
 ### With full content width
 
-You can expand the content to the full width of its items by using the `ui.content` key.
+You can expand the content to the full width of its items by adding the `min-w-fit` class on the `ui.content` slot.
 
 ::component-example
 ---