#DropDownMenu with custom contents in NuxtUI
2 messages · Page 1 of 1 (latest)
Based on the provided knowledge sources, the NuxtUI <UDropdownMenu> component supports customization of individual menu items using slots such as #item, #item-leading, #item-label, and #item-trailing. It also allows for custom slots for specific items using the slot property (e.g., #profile-trailing). However, there is no explicit documentation or example showing how to add fully custom content (like a large <UAvatar> and a <p> tag) at the very top of the dropdown menu, outside of the standard item structure.
The closest supported customization is per-item content or leading/trailing slots for items. If you need to add a custom header (such as a big avatar and a paragraph) above the menu items, the knowledge sources do not explicitly confirm this is possible with the current <UDropdownMenu> API. You may need to look for future updates or consider workarounds, but as of now, this feature is not documented in the official sources provided DropdownMenu Items DropdownMenu Custom Slot.
If you need to customize the content of menu items themselves, you can use the documented slot system. For example:
<UDropdownMenu :items="items">
<UButton label="Open" />
<template #profile-trailing>
<UIcon name="i-lucide-badge-check" />
</template>
</UDropdownMenu>