Docs
ドロップダウンメニュー

ドロップダウンメニュー

ボタンアクションでトリガーされるメニュー（アクションや機能のセットなど）をユーザに表示します。

DocsAPI Reference

インストール

npx shadcn-ui@latest add dropdown-menu

使用方法

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
<DropdownMenu>
  <DropdownMenuTrigger>開く</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>マイアカウント</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>プロフィール</DropdownMenuItem>
    <DropdownMenuItem>請求</DropdownMenuItem>
    <DropdownMenuItem>チーム</DropdownMenuItem>
    <DropdownMenuItem>サブスクリプション</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

例

チェックボックス

ラジオグループ