Skip to content

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

Free

Quick Actions Menu Dropdown Menu for React

A quick actions menu with labeled groups for create, search, filter, import and export, each with its keyboard shortcut.

Quick Actions groups Create New, Search, and Filter, then Import and Export, then Refresh. Every row prints a shortcut. The keys are not bound.

Use it on a dashboard when commands and their keys should be taught from one button. If people should type to filter the list, use Command. In React, Base UI only prints the shortcuts.

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 />}>
    <ZapIcon aria-hidden="true" data-icon="inline-start" />
    Quick Actions
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem>
        <PlusIcon aria-hidden="true" />
        Create New
        <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <SearchIcon aria-hidden="true" />
        Search
        <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <FilterIcon aria-hidden="true" />
        Filter
        <DropdownMenuShortcut>⌘F</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuLabel>Import/Export</DropdownMenuLabel>
      <DropdownMenuItem>
        <UploadIcon aria-hidden="true" />
        Import
{/* The rest of the file is under Installation. */}

FAQ

How are the quick actions grouped?

The first DropdownMenuGroup holds the Quick Actions label, a separator, and Create New, Search and Filter. After a separator, a second group holds the Import/Export label with Import and Export. Refresh stands alone after a last separator.

Which shortcuts are shown?

Create New ⌘N, Search ⌘K, Filter ⌘F, Import ⌘I, Export ⌘E and Refresh ⌘R, each in a DropdownMenuShortcut at the end of the row. They're hints only: bind the keys on the page so they work while the menu is closed.

What leads each row?

A plus, search, filter, upload, download or refresh icon, aria-hidden, before the label. The menu is w-56.

What does the trigger look like?

A default Button with a lightning icon before the words Quick Actions.

Is Import/Export a command?

No. It's a DropdownMenuLabel, the heading of its group: the arrow keys skip it and nothing happens on click. Import and Export are the items under it.

How do I run Search or Export?

The menu closes after a choice. Handle it where your library reports the chosen item. Set onClick on each DropdownMenuItem.

API Reference

Dropdown Menu

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

Button

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

All 30 dropdown menu examples