DropdownMenu

npx shadcn@latest add https://kasumi-ui.vercel.app/r/dropdown-menu.json

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

<DropdownMenu>
<DropdownMenuTrigger asChild>
  <Button variant="outline">メニューを開く</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
  <DropdownMenuLabel>アカウント</DropdownMenuLabel>
  <DropdownMenuSeparator />
  <DropdownMenuItem>プロフィール</DropdownMenuItem>
  <DropdownMenuItem>設定</DropdownMenuItem>
  <DropdownMenuItem>通知</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

<DropdownMenu>
<DropdownMenuTrigger asChild>
  <Button variant="outline">編集</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
  <DropdownMenuItem>
    元に戻す
    <DropdownMenuShortcut>⌘Z</DropdownMenuShortcut>
  </DropdownMenuItem>
  <DropdownMenuItem>
    やり直す
    <DropdownMenuShortcut>⇧⌘Z</DropdownMenuShortcut>
  </DropdownMenuItem>
  <DropdownMenuSeparator />
  <DropdownMenuItem>
    切り取り
    <DropdownMenuShortcut>⌘X</DropdownMenuShortcut>
  </DropdownMenuItem>
  <DropdownMenuItem>
    コピー
    <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
  </DropdownMenuItem>
  <DropdownMenuItem>
    貼り付け
    <DropdownMenuShortcut>⌘V</DropdownMenuShortcut>
  </DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

<DropdownMenu>
<DropdownMenuTrigger asChild>
  <Button variant="outline">操作</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
  <DropdownMenuItem>編集</DropdownMenuItem>
  <DropdownMenuItem>複製</DropdownMenuItem>
  <DropdownMenuSeparator />
  <DropdownMenuItem destructive>削除</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>