Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Actions

File Actions Dropdown Dropdown Menu for React

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

Framework
UI library

The three-dot menu next to every file in a cloud drive. This dropdown menu opens from a ghost dots button and lists View Details, Download, Share, Duplicate, Archive and a destructive Delete, with shortcut hints on Duplicate and Delete. It fits file managers, document libraries and storage apps.

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

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. align="end" on DropdownMenuContent sets it; align defaults to start.

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 onClick on each DropdownMenuItem.

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.

All 30 dropdown menu examples