Skip to content

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

Free

Dropdown with Groups and Labels Dropdown Menu for Ark UI

A menu split into labeled My Account and Team groups, with a destructive log out set apart at the end.

Options splits into My Account and Team, each under a label, then a destructive Log out on its own. The labels are headings, not commands.

Use it when one menu mixes account commands and team commands. If the list is long enough to search, use Command. In React, Ark UI does not run Log 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 asChild>
    <Button variant="outline">
      Options
      <ChevronDownIcon aria-hidden="true" data-icon="inline-end" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem value="profile">
        <UserIcon aria-hidden="true" />
        Profile
      </DropdownMenuItem>
      <DropdownMenuItem value="billing">
        <CreditCardIcon aria-hidden="true" />
        Billing
      </DropdownMenuItem>
      <DropdownMenuItem value="settings">
        <SettingsIcon aria-hidden="true" />
        Settings
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuLabel>Team</DropdownMenuLabel>
      <DropdownMenuItem value="team-members">
        <UsersIcon aria-hidden="true" />
        Team Members
      </DropdownMenuItem>
{/* The rest of the file is under Installation. */}

FAQ

How are My Account and Team split?

Each is a DropdownMenuGroup that starts with its DropdownMenuLabel, with a DropdownMenuSeparator between them. A separator also sits under My Account's label, and another before Log out.

Which icon is on each row?

A user for Profile, a card for Billing, a gear for Settings, people for Team Members, a life buoy for Support and an arrow for Log out, each aria-hidden before the label.

How is Log out marked?

variant="destructive" on its DropdownMenuItem, outside both groups. It colors the row and doesn't confirm anything.

Is My Account a command?

No. A DropdownMenuLabel names its group: it can't be focused or picked, and the arrow keys skip it.

What does the trigger look like?

An outline Button that reads Options, with a chevron after the word. The menu is w-56.

How do I run code when a row is chosen?

The menu closes after a choice. Handle it where your library reports the chosen item. Set onSelect on DropdownMenu. It receives details.value, such as team-members.

API Reference

Dropdown Menu

Sets asChild, value="profile", value="billing", value="settings", value="team-members" and value="support". The rest is on the Dropdown Menu page.

Button

Sets variant="outline". The rest is on the Button page.

All 30 dropdown menu examples