Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

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.

A plus button opens Image, Video, Link, Table, Code Block, and File. Image, Link, Table, and Code Block print shortcuts. Video and File do not.

Use it when insert actions should not take a whole toolbar. A longer list is easier to search with Command. In React, Base UI does not insert anything or listen for the keys.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Dropdown Menu anatomy: trigger, label, item, shortcut, separator, sub trigger, content

Usage

<DropdownMenu>
  <DropdownMenuTrigger
    render={<Button aria-label="Insert" size="icon-md" variant="outline" />}
  >
    <PlusIcon aria-hidden="true" />
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-48">
    <DropdownMenuItem>
      <ImageIcon aria-hidden="true" />
      Image
      <DropdownMenuShortcut>⌘⇧I</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <VideoIcon aria-hidden="true" />
      Video
    </DropdownMenuItem>
    <DropdownMenuItem>
      <LinkIcon aria-hidden="true" />
      Link
      <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <TableIcon aria-hidden="true" />
      Table
      <DropdownMenuShortcut>⌘⇧T</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <CodeIcon aria-hidden="true" />
      Code Block
      <DropdownMenuShortcut>⌘⇧C</DropdownMenuShortcut>
{/* The rest of the file is under 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.

Can I reach File from the keyboard?

Yes. Type F to jump to it, or press End, since it's the last row. Enter picks it and Escape closes the menu.

API Reference

Dropdown Menu

No extra props in this demo. The rest is on the Dropdown Menu page.

Button

Sets aria-label="Insert", size="icon-md" and variant="outline". The rest is on the Button page.

All 30 dropdown menu examples