Profile with Preferences Dropdown Menu for React

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

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

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

The avatar opens the name and email, Profile and Settings, three checkbox preferences, and a destructive Log out. The toggles are email, push, and auto-save.

Use it when a few settings are flipped often enough to sit in the account menu. Put rare ones on the page with a Switch. In React, Base UI does not save those ticks or sign the user out.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

<DropdownMenu>
  <DropdownMenuTrigger
    render={
      <Button
        aria-label="Open account menu"
        pill
        size="icon-lg"
        variant="ghost"
      />
    }
  >
    <Avatar>
      <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end" className="w-64">
    <DropdownMenuGroup>
      <DropdownMenuLabel className="font-normal">
        <div className="flex flex-col gap-1">
          <p className="font-medium text-foreground text-sm leading-none">
            shadcn
          </p>
          <p className="text-muted-foreground text-xs leading-none">
            m@example.com
          </p>
        </div>
      </DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem>
        <UserIcon aria-hidden="true" />
{/* The rest of the file is under Installation. */}

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.

API Reference

Sets align="end", checked={emailNotifications}, onCheckedChange={setEmailNotifications}, checked={pushNotifications}, onCheckedChange={setPushNotifications} and checked={autoSave}. The rest is on the Dropdown Menu page.