Skip to content

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

Free

Item in Dropdown for Ark UI

A Select button that opens a menu of three people. Each row has an avatar, a username and a masked email.

An outline Select button, with a chevron, opens a menu. Inside it, three rows each show an avatar, a username and a masked email.

Use rich rows in a menu when a name alone is not enough, such as picking a person. A Combobox fits once the list needs a search box. Ark UI in React does not filter the menu.

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

Item anatomy: root, media, title, description, actions

Usage

<div className="flex min-h-64 w-full max-w-md flex-col items-center gap-6">
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <Button className="w-fit" size="sm" variant="outline">
        Select
        <ChevronDownIcon aria-hidden="true" data-icon="inline-end" />
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent className="w-72">
      {PEOPLE.map((person) => (
        <DropdownMenuItem
          className="p-0"
          key={person.username}
          value={person.username}
        >
          <Item className="w-full p-2" size="sm">
            <ItemMedia>
              <Avatar>
                <AvatarImage src={person.avatar} />
                <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>
              </Avatar>
            </ItemMedia>
            <ItemContent className="gap-0.5">
              <ItemTitle>{person.username}</ItemTitle>
              <ItemDescription>{person.email}</ItemDescription>
            </ItemContent>
          </Item>
        </DropdownMenuItem>
      ))}
    </DropdownMenuContent>
  </DropdownMenu>
</div>

FAQ

When should menu options use an Item instead of plain text?

When each option carries more than one piece of information, like a name and an email, or needs a picture to be recognized. For short labels such as Edit or Delete, plain text and an icon are enough. The menu's keyboard handling is the same either way.

Why p-0 on the menu item and p-2 on the Item?

Both parts have padding, and together they would double it. Removing it from the menu item and setting it on the Item lets one part own the spacing, and w-full makes the Item fill the row so the highlight covers it edge to edge.

How does ItemMedia hold the avatar?

ItemMedia keeps the avatar from shrinking and aligns it with the text; when the row has a description, it moves to the top of the row. The Avatar here is its default size, and AvatarFallback shows the username's first letter if the picture doesn't load.

Why use size sm for Items in a menu?

size="sm" tightens the Item's gap and padding so more people fit before the menu scrolls. The example then sets p-2 on top of it to match the menu's own items. For an even tighter menu there's xs.

How do I set the width of the menu?

Put a width class on the menu content, w-72 here, and give the Item w-full. A fixed width keeps the menu from jumping as rows change; the title clamps to one line and the description to two if a value is longer.

Are Items inside a menu accessible?

Yes. The menu item carries the menuitem role and the keyboard handling, and the Item inside is only its content. Choosing a row closes the menu. To act on the choice: Set onSelect on Dropdown Menu. It receives details.value, so each item needs a value.

API Reference

Dropdown Menu

Sets asChild and value={person.username}. The rest is on the Dropdown Menu page.

Button

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

Item

Sets size="sm". The rest is on the Item page.

Avatar

Sets src={person.avatar}. The rest is on the Avatar page.

All 10 item examples