Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dropdown Menu - Insert Options Dropdown
A React insert options dropdown menu for Image, Video, Link, Table, Code Block, and File with keyboard shortcut hints
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Content insertion needs quick access—insert menus organize media and structural elements efficiently. This React dropdown menu uses shadcn/ui DropdownMenu with Plus icon trigger featuring Image, Video, Link, Table, Code Block, and File options from Lucide React. Built with DropdownMenuShortcut showing Cmd-Shift-I, Cmd-K shortcuts. The insert pattern improves editor productivity—perfect for content editors, documentation tools, blog platforms, or anywhere rich content needs organized media insertion with keyboard hints.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Block Type Selector
Organized block categories
Text Formatting
Text style options
Standard Dropdown
Basic dropdown menu
Standard Dialog
Upload dialog modal
Button Component
Plus icon trigger
Heading Selector
Heading levels
Questions you might have
React Dropdown Menu - Block Type Selector
A React block type selector dropdown with Basic Blocks, Lists, and Media sections organized by DropdownMenuLabel groups
React Dropdown Menu - Heading Selector
A React heading level selector dropdown using DropdownMenuRadioGroup for H1 through H6 with styled preview text sizes