下拉菜单

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

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add dropdown-menu
Copy

用法

🌐 Usage

Copyimport { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

Copy<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>

示例

🌐 Examples

基础

🌐 Basic

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

🌐 A basic dropdown menu with labels and separators.

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

子菜单

🌐 Submenu

使用 DropdownMenuSub 来嵌套二级操作。

🌐 Use DropdownMenuSub to nest secondary actions.

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

快捷方式

🌐 Shortcuts

添加 DropdownMenuShortcut 以显示键盘提示。

🌐 Add DropdownMenuShortcut to show keyboard hints.

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

图标

🌐 Icons

将图标与标签结合以便快速浏览。

🌐 Combine icons with labels for quick scanning.

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

复选框

🌐 Checkboxes

使用 DropdownMenuCheckboxItem 作为切换开关。

🌐 Use DropdownMenuCheckboxItem for toggles.

"use client"

import * as React from "react"

复选框图标

🌐 Checkboxes Icons

为复选框项目添加图标。

🌐 Add icons to checkbox items.

"use client"

import * as React from "react"

单选按钮组

🌐 Radio Group

使用 DropdownMenuRadioGroup 进行独占选择。

🌐 Use DropdownMenuRadioGroup for exclusive choices.

"use client"

import * as React from "react"

单选框图标

🌐 Radio Icons

显示带图标的单选选项。

🌐 Show radio options with icons.

"use client"

import * as React from "react"

破坏性

🌐 Destructive

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

🌐 Use variant="destructive" for irreversible actions.

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

头像

🌐 Avatar

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

🌐 An account switcher dropdown triggered by an avatar.

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

复杂

🌐 Complex

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

🌐 A richer example combining groups, icons, and submenus.

"use client"

import * as React from "react"

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

请参阅 Radix UI 文档 获取完整的 API 参考。

🌐 See the Radix UI documentation for the full API reference.