Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Profile

Profile with Preferences Dropdown Menu for React

A profile menu with Profile and Settings links and three preference toggles you can flip from the menu.

Framework
UI library

Some settings get flipped often enough to deserve a shortcut. This dropdown menu opens from the avatar and puts Email Notifications, Push Notifications and Auto-save as checkbox rows under a Quick Preferences label, between the Profile and Settings links and a destructive Log out. It fits apps where people toggle the same few settings every day.

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

Which quick preferences start on?

Email Notifications and Auto-save start checked; Push Notifications starts off. Each row keeps its own state, so any of them can be on together. Each DropdownMenuCheckboxItem takes checked and onCheckedChange, which receives a boolean.

What are the rows that are not checkboxes?

Profile and Settings, under the header, and Log out at the end with variant="destructive". They're plain items with an aria-hidden icon each.

What is the trigger?

A round ghost Button (pill, size="icon-lg") holding the user's Avatar, with aria-label set to Open account menu.

What is in the header, and where does the menu open?

A DropdownMenuLabel with the name, shadcn, over m@example.com. The menu is w-64 and lines up with the end of the avatar button, since the avatar usually sits at the end of a navbar.

Does the menu stay open while I toggle preferences?

It depends on the library; each has a setting to change it. Checkbox rows keep the menu open; closeOnClick changes that.

Do the preference ticks stay after the menu closes?

Yes. The checked state lives in the demo's component, not in the menu, so it's still there when the menu reopens. Save it to the user's settings when it changes so it survives a reload.

All 30 dropdown menu examples