Dropdown Menu

用于将多条命令、勾选设置或删除操作收纳在一个按钮后。

预览

工作区操作菜单

查看页面命令、受控深度辅助线勾选项、主题单选子菜单和工作区删除项目。

安装

npx shadcn@latest add @neumorphism-ui/dropdown-menu

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

工作区操作菜单

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/dropdown-menu

Registry JSON

用法

组合 DropdownMenuTrigger 与 DropdownMenuContent，并对相关项目分组。表示偏好的复选或单选项目需连接到应用状态。

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";

export default function Example() {
  const [visible, setVisible] = useState(true);
  return (
    <div>
      <DropdownMenu>
        <DropdownMenuTrigger render={<Button />}>View options</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuCheckboxItem checked={visible} onCheckedChange={setVisible}>Show details</DropdownMenuCheckboxItem>
        </DropdownMenuContent>
      </DropdownMenu>
      {visible && <p>Project details are visible.</p>}
    </div>
  );
}

API 参考

基于 Base UI Menu 的完整组合式 API。可在同一表面中组织普通 item、checkbox、radio group、label、separator、shortcut 和嵌套 submenu。

组件	属性	类型	默认值	说明
`DropdownMenu`	`open / defaultOpen`	`boolean`	`false`	受控的菜单打开状态或非受控初始状态。
`DropdownMenu`	`onOpenChange`	`(open: boolean) => void`	`—`	菜单打开状态变化时调用。
`DropdownMenuTrigger`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	将 trigger 行为组合到按钮或链接上。
`DropdownMenuContent`	`side / align`	`"top" \| "right" \| "bottom" \| "left" / "start" \| "center" \| "end"`	`"bottom" / "start"`	相对于 trigger 设置 popup 的位置。
`DropdownMenuContent`	`sideOffset`	`number`	`8`	设置 trigger 与 popup 之间的间距。
`DropdownMenuItem`	`variant`	`"default" \| "destructive"`	`"default"`	选择普通操作或危险操作样式。
`DropdownMenuItem / Label`	`inset`	`boolean`	`false`	对齐带 indicator 的行与文本起始位置。
`DropdownMenuCheckboxItem`	`checked`	`boolean`	`—`	checkbox item 的受控选中状态。
`DropdownMenuCheckboxItem`	`onCheckedChange`	`(checked) => void`	`—`	checkbox item 状态变化时调用。

预览

工作区操作菜单

安装

用法

API 参考

无障碍