Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Standard

Simple Dropdown with Icons Dropdown Menu for React

A short menu behind a dots button with an icon before Profile, Settings, Help and a destructive Log out.

Framework
UI library

Plain text rows make people read every word; an icon lets them spot the row. This dropdown menu opens from a dots button and puts an icon before Profile, Settings, Help and Log out, the last one in the destructive color. It's the smallest useful menu, for navbars, cards and toolbars.

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 this menu?

Four DropdownMenuItems, Profile, Settings, Help and Log out, each with an aria-hidden icon before the label. There are no groups or separators.

How is Log out marked?

variant="destructive" on its item colors it. It doesn't confirm anything; do that in its handler if you need to.

What does the trigger look like?

An outline Button with size="icon-md", a dots icon and aria-label set to More options, since it has no text.

How do I give the menu a fixed width?

Set a width class on the content part. The demo uses w-40; without one the menu sizes to its rows.

How do I run Settings or Log out?

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. Tab to the button and press Enter, Space or Arrow Down. Arrow keys move between rows, Enter picks one, and Escape closes the menu and returns focus to the button.

All 30 dropdown menu examples