Thành phần

Dropdown Menu

Dropdown menu on Base UI Menu: paper popup, 1px ink rule, ink-fill highlight, hairline separators, checkbox, radio and submenu rows.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Install

bash

npx shadcn add @eloquent/dropdown-menu

Usage

tsx

import { Button } from "@/components/ui/button";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel,
  DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>Account</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>My account</DropdownMenuLabel>
      <DropdownMenuItem>Profile<DropdownMenuShortcut>⇧P</DropdownMenuShortcut></DropdownMenuItem>
      <DropdownMenuItem>Settings</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">Sign out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Put DropdownMenuLabel inside a DropdownMenuGroup. The submenu parts are DropdownMenuSub, DropdownMenuSubTrigger and DropdownMenuSubContent.

States

Checkbox items

Radio items

Destructive and disabled

State	Treatment
Open	Paper popup, 1px ink rule, no shadow
Highlighted	Ink fill, paper text; it is the menu's focus indicator, so the keyboard and the pointer both move it
Disabled	`halftone` text, `cursor-not-allowed`; `tint-1` when highlighted
Checked	Ink check icon (checkbox), filled ink dot (radio)
Destructive	Ink ✕ icon before the label; never red
Submenu open	`tint-1` band on its row

Keyboard

Key	Action
Enter / Space / ArrowDown	On the trigger, open with the first row highlighted
ArrowDown / ArrowUp	Move the highlight; it wraps
Home / End	First or last row
A letter	Jump to the next row starting with it
Enter / Space	Activate the row; checkbox and radio rows keep the menu open
ArrowRight	Open a submenu
ArrowLeft	Close a submenu and return to its row
Esc	Close; focus returns to the trigger

Vietnamese

Ink adaptation

Upstream shadcn's shadow, radius, colour tokens and animation are removed. Rows are Barlow at 44px high, labels are tracked capitals and separators are hairlines. The inventory suggests a tint-1 highlight; the ink fill is used so the keyboard position stays clear (the same reading as Select). Built on Base UI Menu.