#DropDownMenu with custom contents in NuxtUI

2 messages · Page 1 of 1 (latest)

fresh prawnBOT
#

Hi @terse edge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

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>

But for a custom header above all items, the knowledge sources do not provide a solution.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: