下拉菜单

安装

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

安装以下依赖：

npm install radix-ui

将以下代码复制到你的项目中。

View complete source: components/ui/dropdown-menu.tsx

根据项目配置更新导入路径。

用法

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>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>Team</DropdownMenuItem>
      <DropdownMenuItem>Subscription</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

Composition

Use the following composition to build a 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

Basic

A basic dropdown menu with labels and separators.

Submenu

Use DropdownMenuSub to nest secondary actions.

Shortcuts

Add DropdownMenuShortcut to show keyboard hints.

Icons

Combine icons with labels for quick scanning.

Checkboxes

Use DropdownMenuCheckboxItem for toggles.

Checkboxes Icons

Add icons to checkbox items.

Radio Group

Use DropdownMenuRadioGroup for exclusive choices.

Radio Icons

Show radio options with icons.

危险操作

Use variant="destructive" for irreversible actions.

Avatar

An account switcher dropdown triggered by an avatar.

Complex

A richer example combining groups, icons, and submenus.

从右到左布局

To enable RTL support in JGuang UI, see the RTL configuration guide.

API 参考

See the Radix UI documentation for the full API reference.