Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dropdown Menu - Text Formatting Dropdown
A React text formatting dropdown menu with Bold, Italic, Underline, Strikethrough, and Code options plus keyboard shortcuts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Rich text editors need quick formatting—dropdown menus consolidate text styles without toolbar clutter. This React dropdown menu uses shadcn/ui DropdownMenu with Type icon trigger featuring Bold, Italic, Underline, Strikethrough, and Code formatting options from Lucide React. Built with DropdownMenuShortcut showing Cmd-B, Cmd-I, Cmd-U shortcuts. The formatting menu pattern improves editor efficiency—perfect for content editors, note apps, email composers, or anywhere text formatting needs organized access with keyboard hints reducing toolbar space.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Block Type Selector
Insert blocks with grouped options
Insert Options
Media and content insertion
Alignment Options
Text alignment controls
Button Group
Grouped toolbar buttons
Standard Dropdown
Basic dropdown menu
Toolbar Component
Editor toolbar
Questions you might have
React Dropdown Menu - Quick Actions Menu
A React dropdown menu organizing frequently-used actions into labeled groups with keyboard shortcuts for create, search, filter, import, export, and refresh
React Dropdown Menu - Block Type Selector
A React block type selector dropdown with Basic Blocks, Lists, and Media sections organized by DropdownMenuLabel groups