shadcn.io is not affiliated with official shadcn/ui
Dropdown Menu examples · Editor
Insert Options Dropdown Dropdown Menu for React
An insert menu behind a plus button for images, video, links, tables, code blocks and files, with shortcut hints.
An editor's plus button that opens everything you can drop into a document. This dropdown menu lists Image, Video and Link, then Table and Code Block, then File, with shortcut hints on the rows that have one. It fits content editors, blog platforms and docs tools.
Preview
Installation
FAQ
What can this menu insert?
Image, Video and Link; after a separator, Table and Code Block; after another, File. The menu is w-48.
Which rows show a shortcut?
Image ⌘⇧I, Link ⌘K, Table ⌘⇧T and Code Block ⌘⇧C, each in a DropdownMenuShortcut. Video and File have none. The hints don't bind the keys; register them in your editor.
Where do the icons sit?
First in each DropdownMenuItem, aria-hidden, then the label, then the shortcut at the end of the row.
What does the trigger look like?
An outline Button with size="icon-md", a plus icon and aria-label set to Insert, since there's no visible text.
How do I insert an image when that row is chosen?
Open your file picker or upload Dialog from the Image row's handler. The menu closes first, so focus can move to it.
Set onClick on the Image DropdownMenuItem.
Related
- Block Type Selector Dropdown MenuAn Insert Block menu with text, list and
- Text Formatting Dropdown Dropdown MenuA text formatting menu with bold, italic
- Simple Dropdown with Icons Dropdown MenuA short menu behind a dots button with an
- Standard DialogA share dialog with a read-only link, a
- Button with Text (Standard)The one filled action
- Heading Selector Dropdown MenuA heading level picker from H1 to H6