Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Standard

Nested Dropdown Dropdown Menu for React

A New menu with Document and Folder on top and two submenus, one for media and one for document types.

Framework
UI library

A flat menu of twenty options makes people scroll. This dropdown menu opens from a New button with Document and Folder on top, and nests the rest in two submenus: Media (Image, Video, Audio) and Document Type (Text Document, Spreadsheet, Presentation, Form). It fits create menus in drives, CMSs and project tools.

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 is in the top menu?

Document and Folder, a separator, then the Media and Document Type submenu triggers. The menu is w-56.

How is a submenu built?

DropdownMenuSub wraps a DropdownMenuSubTrigger, which draws a chevron at its end, and a DropdownMenuSubContent with the rows. It opens beside its trigger on hover or with Arrow Right, and flips to the other side when there's no room.

What is inside Media?

Image, Video and Audio, each after an aria-hidden icon.

What is inside Document Type?

Text Document, Spreadsheet, Presentation and Form, as plain text rows.

How do I create the chosen file?

Create it where your library reports the choice; the whole menu closes after it. Set onClick on each DropdownMenuItem.

Can I open Media from the keyboard?

Yes. Move to Media with the arrow keys and press Arrow Right or Enter to open it. Arrow Left closes the submenu and returns to Media.

All 30 dropdown menu examples