125k

Dropdown Menu

PreviousNext

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

BaseRadixReact Aria
import { Button } from "@/components/ui/radix/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>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>Team</DropdownMenuItem>
      <DropdownMenuItem>Subscription</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

基本

ラベルと区切り文字を含む基本的なドロップダウン メニュー。

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

サブメニュー

二次的な操作をネストするには DropdownMenuSub を使用します。

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

ショートカット

キーボードのヒントを表示するには DropdownMenuShortcut を追加します。

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

アイコン

素早く判別できるように、アイコンとラベルを組み合わせます。

import {
  CreditCardIcon,
  LogOutIcon,

チェックボックス

トグルには 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 { PencilIcon, ShareIcon, TrashIcon } from "lucide-react"

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

アバター

アバターによってトリガーされるアカウント切り替えドロップダウン。

import {
  BadgeCheckIcon,
  BellIcon,

複雑な例

グループ、アイコン、サブメニューを組み合わせた豊富な例。

"use client"

import * as React from "react"

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

"use client"

import * as React from "react"

API リファレンス

完全な API リファレンスについては、Radix UI ドキュメント を参照してください。