Skip to content

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

Free

File Actions Dropdown Dropdown Menu for Solid

A file's actions menu with view, download, share, duplicate, archive and delete, and keyboard shortcut hints.

UI library: Ark UI

A dots button lists View Details, Download, Share, Duplicate, Archive, and a destructive Delete. Duplicate prints ⌘D and Delete prints ⌘⌫. Those hints are not listeners.

Use it beside a file when the commands should stay off the row. If delete cannot be undone, confirm in an Alert Dialog. In Solid, Ark UI does not download the file or bind the keys.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<DropdownMenu>
    <DropdownMenuTrigger asChild={props => <Button {...props()} aria-label="File actions" size="icon-md" variant="ghost">
        <MoreHorizontalIcon aria-hidden="true" />
      </Button>} />
    <DropdownMenuContent class="w-48">
      <DropdownMenuItem value="view-details">
        <EyeIcon aria-hidden="true" />
        View Details
      </DropdownMenuItem>
      <DropdownMenuItem value="download">
        <DownloadIcon aria-hidden="true" />
        Download
      </DropdownMenuItem>
      <DropdownMenuItem value="share">
        <Share2Icon aria-hidden="true" />
        Share
      </DropdownMenuItem>
      <DropdownMenuItem value="duplicate">
        <CopyIcon aria-hidden="true" />
        Duplicate
        <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem value="archive">
        <ArchiveIcon aria-hidden="true" />
        Archive
      </DropdownMenuItem>
      <DropdownMenuItem value="delete" variant="destructive">
        <Trash2Icon aria-hidden="true" />
        Delete
        <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
{/* The rest of the file is under Installation. */}

FAQ

What actions are on this file?

View Details, Download, Share and Duplicate, then a separator, then Archive and Delete. Duplicate shows ⌘D and Delete shows ⌘⌫, each in a DropdownMenuShortcut. The shortcut only prints the hint: bind the keys on the page yourself.

How is Delete marked?

variant="destructive" on that DropdownMenuItem, after a trash icon. Archive, above it, keeps the default variant. The variant only colors the row; it doesn't confirm the delete.

What does the trigger look like?

A ghost Button with size="icon-md", aria-label set to File actions and a dots icon. The menu is w-48 and lines up with the end of the button. End alignment is DropdownMenu's default bottom-end placement; pass positioning to change it.

Where do the row icons go?

An eye, download, share, copy, archive and trash icon come first in each DropdownMenuItem, with aria-hidden, and the label follows. The item spaces and sizes them.

How do I run Download or Delete?

The menu closes after a choice. Handle it where your library reports the chosen item. Set onSelect on DropdownMenu. It receives details.value, the chosen item's value.

Can I open this menu from the keyboard?

Yes. Focus the button and press Enter, Space or Arrow Down. Arrow Up and Arrow Down move between rows, Enter picks one, typing a letter jumps to a matching label, and Escape closes the menu and returns focus to the button.

API Reference

Dropdown Menu

Sets asChild, props, value="view-details", value="download", value="share" and value="duplicate". The rest is on the Dropdown Menu page.

Button

Sets props, aria-label="File actions", size="icon-md" and variant="ghost". The rest is on the Button page.

All 30 dropdown menu examples