Skip to content

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

Free

Mixed Features Dropdown Dropdown Menu for React

A File menu that mixes actions with shortcuts, an Export submenu, view toggles and an export quality choice.

File mixes Save and Print with shortcut hints, an Export submenu for PDF, PNG, and SVG, view checkboxes, an export quality choice, and a Recent Files row.

Use it when one menu has to hold commands, a submenu, toggles, and a single choice. Commands that stay on screen fit a Menubar. In React, Base UI does not export the file or bind 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 variant="outline" />}>
    <MenuIcon aria-hidden="true" data-icon="inline-start" />
    File
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>File Options</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem>
        <SaveIcon aria-hidden="true" />
        Save
        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuSub>
        <DropdownMenuSubTrigger>
          <DownloadIcon aria-hidden="true" />
          Export
        </DropdownMenuSubTrigger>
        <DropdownMenuPortal>
          <DropdownMenuSubContent>
            <DropdownMenuItem>Export as PDF</DropdownMenuItem>
            <DropdownMenuItem>Export as PNG</DropdownMenuItem>
            <DropdownMenuItem>Export as SVG</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuPortal>
      </DropdownMenuSub>
      <DropdownMenuItem>
        <Share2Icon aria-hidden="true" />
        Share
      </DropdownMenuItem>
{/* The rest of the file is under Installation. */}

FAQ

What is in the File Options section?

Under its label and a separator: Save (⌘S), the Export submenu, Share and Print (⌘P), all in one DropdownMenuGroup. The menu is w-56.

How is the Export submenu built?

DropdownMenuSub wraps a DropdownMenuSubTrigger, a download icon and the word Export with its own chevron, and a DropdownMenuSubContent with Export as PDF, Export as PNG and Export as SVG. Hover or Arrow Right opens it.

How do Show Grid and Show Ruler work?

Two checkbox rows under a View Options label: Show Grid starts on, Show Ruler off, and each toggles on its own. Each DropdownMenuCheckboxItem takes checked and onCheckedChange, which receives a boolean.

How does Export Quality work?

One value, high to start, out of low, medium and high, under an Export Quality label. Picking one unchecks the others. DropdownMenuRadioGroup takes value, and onValueChange receives the new value.

What does the trigger look like?

An outline Button with a menu icon before the word File.

When should this become a menubar?

When there's more than one menu like it, such as File, Edit and View side by side. A Menubar keeps them in one row and moves between them with the arrow keys.

API Reference

Dropdown Menu

Sets checked={showGrid}, onCheckedChange={setShowGrid}, checked={showRuler}, onCheckedChange={setShowRuler}, onValueChange={setQuality} and value={quality}. The rest is on the Dropdown Menu page.

Button

Sets variant="outline". The rest is on the Button page.

All 30 dropdown menu examples