Skip to content

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

Free

Insert Options Dropdown Dropdown Menu for Ark UI

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, Ark 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 asChild>
    <Button aria-label="Insert" size="icon-md" variant="outline">
      <PlusIcon aria-hidden="true" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-48">
    <DropdownMenuItem value="image">
      <ImageIcon aria-hidden="true" />
      Image
      <DropdownMenuShortcut>⌘⇧I</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem value="video">
      <VideoIcon aria-hidden="true" />
      Video
    </DropdownMenuItem>
    <DropdownMenuItem value="link">
      <LinkIcon aria-hidden="true" />
      Link
      <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem value="table">
      <TableIcon aria-hidden="true" />
      Table
      <DropdownMenuShortcut>⌘⇧T</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem value="code-block">
      <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 onSelect on DropdownMenu and check for details.value image.

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

Sets asChild, value="image", value="video", value="link", value="table" and value="code-block". 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