Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dropdown Menu - Simple Dropdown with Icons
A React dropdown menu with icon-labeled items for profile, settings, help, and logout actions built with shadcn/ui and Radix UI
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Three-dot menus are everywhere, but plain text makes users guess what each action does. This React dropdown menu adds Lucide React icons next to every action—Profile, Settings, Help, Log out—making options instantly recognizable. Built with shadcn/ui and Radix UI with MoreHorizontal trigger, it's perfect for user account menus, toolbars, or any interface where visual clarity beats minimal text.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Dropdown with Groups and Labels
Organized dropdown with section headers
Dropdown with Shortcuts
Keyboard shortcuts for quick actions
Context Menu with Icons
Right-click menu with icon labels
Popover Menu
Alternative menu component
Settings Drawer
Side panel for settings interface
Standard Dialog
Modal for focused actions
Questions you might have
React Dropdown Menu - View Options
A React view options dropdown combining DropdownMenuRadioGroup for layout selection and DropdownMenuCheckboxItem for display toggles
React Dropdown Menu - Dropdown with Groups and Labels
A React dropdown menu organized with section labels and visual separators grouping related account and team actions built with shadcn/ui