Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dropdown Menu - Block Type Selector
A React block type selector dropdown with Basic Blocks, Lists, and Media sections organized by DropdownMenuLabel groups
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Block-based editors need organized content types—grouped menus categorize insertable blocks clearly. This React dropdown menu uses shadcn/ui DropdownMenu with Plus icon trigger featuring Text, Quote, Divider, Lists (Bulleted, Numbered, To-do), and Media (Image, Embed, Code Block) organized with DropdownMenuLabel sections. Built with Lucide React icons creating Notion-style block selector. The grouped blocks pattern improves content creation—perfect for rich editors, documentation tools, CMSes, or anywhere structured content needs categorized block insertion maintaining organization.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Insert Options
Media insertion dropdown
Text Formatting
Text style formatting
Command Dialog
Keyboard-driven block selector
Grouped Dropdown
Basic grouped menu
Heading Selector
Heading level selection
Button Component
Trigger button
Questions you might have
React Dropdown Menu - Text Formatting Dropdown
A React text formatting dropdown menu with Bold, Italic, Underline, Strikethrough, and Code options plus keyboard shortcuts
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