Skip to content

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

Free

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.

A dots button opens Profile, Settings, Help, and Log out, with an icon before each label. Log out uses the destructive color.

Use it for a short account menu on a card or a navbar. If Log out should be confirmed, open an Alert Dialog first. In React, Base UI does not sign the user out.

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

Anatomy

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

Usage

<DropdownMenu>
  <DropdownMenuTrigger
    render={
      <Button aria-label="More options" size="icon-md" variant="outline" />
    }
  >
    <MoreHorizontalIcon aria-hidden="true" />
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-40">
    <DropdownMenuItem>
      <UserIcon aria-hidden="true" />
      Profile
    </DropdownMenuItem>
    <DropdownMenuItem>
      <SettingsIcon aria-hidden="true" />
      Settings
    </DropdownMenuItem>
    <DropdownMenuItem>
      <CircleHelpIcon aria-hidden="true" />
      Help
    </DropdownMenuItem>
    <DropdownMenuItem variant="destructive">
      <LogOutIcon aria-hidden="true" />
      Log out
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

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.

API Reference

Dropdown Menu

Sets variant="destructive". The rest is on the Dropdown Menu page.

Button

Sets aria-label="More options", size="icon-md" and variant="outline". The rest is on the Button page.

All 30 dropdown menu examples