109k
新建

下拉菜单

上一页下一页

由按钮触发，向用户显示菜单（例如一系列操作或功能）。

Radix UIBase UI
Radix UI - shadcn/ui 组件库
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">Open</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuGroup>
      <DropdownMenuSeparator />
      <DropdownMenuItem>Team</DropdownMenuItem>
      <DropdownMenuItem>Subscription</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"

RTL (从右至左)

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

API 参考

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