125k

Dropdown Menu

PreviousNext

ボタンによってトリガーされる、一連の操作や機能などのメニューをユーザーに表示します。

BaseRadixReact Aria
"use client"

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

インストール

pnpm dlx shadcn@latest add dropdown-menu

使い方

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
<DropdownMenuTrigger>
  <Button variant="outline">Open</Button>
  <DropdownMenu>
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>Team</DropdownMenuItem>
      <DropdownMenuItem>Subscription</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenu>
</DropdownMenuTrigger>

構成

DropdownMenu を構築するには、次の構成を使用します。

DropdownMenuTrigger
├── Button
└── DropdownMenu
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuItem
    │   └── DropdownMenuItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuItem
    │   └── DropdownMenuItem
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent
            └── DropdownMenuGroup
                ├── DropdownMenuLabel
                ├── DropdownMenuItem
                └── DropdownMenuItem

基本

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

"use client"

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

サブメニュー

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

"use client"

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

ショートカット

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

"use client"

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

アイコン

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

"use client"

import {

チェックボックス

トグルには selectionMode="multiple" を使用します。

"use client"

import * as React from "react"

チェックボックス アイコン

チェックボックス項目にアイコンを追加します。

"use client"

import * as React from "react"

ラジオグループ

排他的な選択には selectionMode="single" を使用します。

"use client"

import * as React from "react"

ラジオ アイコン

ラジオ オプションをアイコンで表示します。

"use client"

import * as React from "react"

破壊的な操作

不可逆的なアクションには variant="destructive" を使用します。

"use client"

import { PencilIcon, ShareIcon, TrashIcon } from "lucide-react"

アバター

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

"use client"

import {

複雑な例

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

"use client"

import * as React from "react"

RTL

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

"use client"

import * as React from "react"

API リファレンス

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