下拉菜单

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

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

安装


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 asChild>
    <Button variant="outline">打开</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>我的账户</DropdownMenuLabel>
      <DropdownMenuItem>个人资料</DropdownMenuItem>
      <DropdownMenuItem>账单</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuGroup>
      <DropdownMenuSeparator />
      <DropdownMenuItem>团队</DropdownMenuItem>
      <DropdownMenuItem>订阅</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

示例

基础示例

带标签和分割线的基础下拉菜单。

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

子菜单

使用 DropdownMenuSub 嵌套次级操作。

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

快捷键

添加 DropdownMenuShortcut 显示键盘提示。

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

图标

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

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

复选框

使用 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"。

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

头像

通过头像触发的账户切换下拉菜单。

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

复杂示例

结合分组、图标和子菜单的丰富示例。

"use client"

import * as React from "react"

API 参考

查看 Radix UI 文档获取完整 API 参考。

抽屉 Empty

安装使用方法示例基础示例子菜单快捷键图标复选框带图标的复选框单选组带图标的单选危险操作头像复杂示例 API 参考