Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Item in Dropdown
Item components within DropdownMenu displaying user selection list with avatars built using shadcn/ui Item, DropdownMenu, and Avatar
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Dropdown menus need rich content—not just plain text options. This React pattern embeds Item components inside DropdownMenuItem showing user avatars, usernames, and emails creating selectable user list. Built with shadcn/ui Item with ItemMedia for avatars, DropdownMenu for menu behavior, size sm for compact items, and p-0 on DropdownMenuItem with p-2 on Item for proper spacing, it's perfect for user switchers, account selection, team member pickers, or any dropdown requiring structured rich content beyond simple text options.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Item as Link
Clickable item links
Item Sizes
Item sizing variations
Standard Dropdown
Basic dropdown menu
Standard Avatar
Avatar component patterns
Item Group
Grouped items with separators
Combobox
Searchable selection