Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Standard

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.

Framework
UI library

Real menus mix actions and settings. This dropdown menu opens from a File button and combines Save and Print with shortcuts, an Export submenu, Show Grid and Show Ruler checkbox rows, a Low, Medium or High export quality choice, and Recent Files. It fits design tools, editors and any app with one menu for a document.

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 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.

All 30 dropdown menu examples