Dropdown menu
从触发器下方展开的面板，内含一列操作。各行与 Select 相同：末端斜切，高亮时填充强调色。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/dropdown-menu示例
操作、复选与单选
import { useState } from "react";import { Button } from "@/components/zero/button";import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger,} from "@/components/zero/dropdown-menu";import { ExternalIcon } from "@/components/zero/icons";export default function DropdownMenuBasic() { const [radio, setRadio] = useState(true); const [sort, setSort] = useState("reward"); return ( <DropdownMenu> <DropdownMenuTrigger render={<Button variant="secondary" />}> Job actions </DropdownMenuTrigger> <DropdownMenuContent> <DropdownMenuGroup> <DropdownMenuLabel>This job</DropdownMenuLabel> <DropdownMenuItem> Take it <DropdownMenuShortcut>⌘T</DropdownMenuShortcut> </DropdownMenuItem> <DropdownMenuItem> Open the route <ExternalIcon className="ms-auto" /> </DropdownMenuItem> <DropdownMenuItem disabled>Hand in</DropdownMenuItem> </DropdownMenuGroup> <DropdownMenuSeparator /> <DropdownMenuCheckboxItem checked={radio} onCheckedChange={setRadio}> Radio on </DropdownMenuCheckboxItem> <DropdownMenuSeparator /> <DropdownMenuGroup> <DropdownMenuLabel>Sort by</DropdownMenuLabel> <DropdownMenuRadioGroup value={sort} onValueChange={setSort}> <DropdownMenuRadioItem value="reward">Reward</DropdownMenuRadioItem> <DropdownMenuRadioItem value="distance"> Distance </DropdownMenuRadioItem> </DropdownMenuRadioGroup> </DropdownMenuGroup> <DropdownMenuSeparator /> <DropdownMenuItem danger>Abandon</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> );}行为
行内可放图标或 DropdownMenuShortcut。复选行选中时显示对勾，单选行显示与 Select 选中行相同的斜切小标记；danger 使该行变为红色。
按方向键移动高亮，输入字符可跳至匹配的行，按 Enter 执行该行的操作。子菜单（DropdownMenuSub 及其 SubTrigger、SubContent）在所属行旁打开，打开期间该行保持浮起色。
属性
DropdownMenuContent
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "bottom" | 相对触发器的打开方向。 |
| align | "start" | "center" | "end" | "start" | 与触发器的对齐方式。 |
另可传入 Base UI Menu.Popup 的全部属性。
DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent
另可传入 Base UI Menu.CheckboxItem 的全部属性。