113k
New

下拉菜单

PreviousNext

向用户显示一个菜单 — 例如一组操作或功能 — 由按钮触发。

Radix UIBase UI
"use client"

import { Button } from "@/components/ui/button"

安装

pnpm dlx shadcn@latest add dropdown-menu

使用

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    打开
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>我的账户</DropdownMenuLabel>
      <DropdownMenuItem>个人资料</DropdownMenuItem>
      <DropdownMenuItem>账单</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>团队</DropdownMenuItem>
      <DropdownMenuItem>订阅</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

组合

使用以下组合来构建 DropdownMenu：

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuItem
    │   └── DropdownMenuItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuCheckboxItem
    │   └── DropdownMenuCheckboxItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   └── DropdownMenuRadioGroup
    │       ├── DropdownMenuRadioItem
    │       └── DropdownMenuRadioItem
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent
            └── DropdownMenuGroup
                ├── DropdownMenuLabel
                ├── DropdownMenuItem
                └── DropdownMenuItem

示例

基础

一个带标签和分隔符的基础下拉菜单。

"use client"

import { Button } from "@/components/ui/button"

子菜单

使用 DropdownMenuSub 嵌套二级操作。

"use client"

import { Button } from "@/components/ui/button"

快捷键

添加 DropdownMenuShortcut 来显示键盘提示。

"use client"

import { Button } from "@/components/ui/button"

图标

将图标与标签结合，方便快速扫描。

"use client"

import {

复选框

使用 DropdownMenuCheckboxItem 进行切换。

"use client"

import * as React from "react"

复选框图标

为复选框项添加图标。

"use client"

import * as React from "react"

单选组

使用 DropdownMenuRadioGroup 进行唯一选择。

"use client"

import * as React from "react"

单选图标

显示带图标的单选选项。

"use client"

import * as React from "react"

危险操作

对不可逆操作使用 variant="destructive"。

"use client"

import { PencilIcon, ShareIcon, TrashIcon } from "lucide-react"

头像

一个由头像触发的账户切换下拉菜单。

"use client"

import {

复杂示例

一个结合了分组、图标与子菜单的丰富示例。

"use client"

import * as React from "react"

RTL

要在 shadcn/ui 中启用 RTL（从右到左）支持，请参阅RTL 配置指南。

"use client"

import * as React from "react"

API 参考

完整 API 参考请参阅 Base UI 文档。