Dropdown Menu

トリガーをクリックして開く操作メニュー。テキストボタン版(明示的なメニュー呼び出し)と三点リーダーアイコン版(コンパクトな付帯メニュー)の 2 種類。Popover との違いは「中身が動詞(コマンド)の集合」「menu role の a11y(矢印キー操作)」。

プレビュー

テキストボタン版

明示的に「メニューを開く」とラベル付けする用途。ヘッダーの設定メニュー、ツールバーのアクション群などに。

三点リーダーアイコン版

テーブル行ごとの操作、カードの「もっと見る」など、コンパクトに付帯機能を出す用途。

実装例 (テキストボタン版)

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

export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="secondary" size="m">
          Dropdown Menu を開く
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuItem><Icon name="copy" size={16} />コピー</DropdownMenuItem>
        <DropdownMenuItem><Icon name="edit" size={16} />編集</DropdownMenuItem>
        <DropdownMenuItem><Icon name="download" size={16} />ダウンロード</DropdownMenuItem>
        <DropdownMenuItem variant="destructive"><Icon name="trash" size={16} />削除</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

実装例 (三点リーダーアイコン版)

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

export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="secondary" size="m" square aria-label="操作メニュー">
          <Icon name="menu-vertical" size={16} />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuItem><Icon name="copy" size={16} />コピー</DropdownMenuItem>
        <DropdownMenuItem><Icon name="edit" size={16} />編集</DropdownMenuItem>
        <DropdownMenuItem><Icon name="download" size={16} />ダウンロード</DropdownMenuItem>
        <DropdownMenuItem variant="destructive"><Icon name="trash" size={16} />削除</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

仕様

primitive: src/components/ui/dropdown-menu.tsx(shadcn 公式そのまま)
構成: DropdownMenu / DropdownMenuTrigger / DropdownMenuContent / DropdownMenuLabel / DropdownMenuItem(variant="destructive" で赤系) / DropdownMenuSeparator / DropdownMenuCheckboxItem / DropdownMenuRadioGroup など
trigger の見せ方は テキスト + caret か 三点リーダーアイコン の 2 系統。前者は「動作を予告したい場面」、後者は「画面密度が高くスペースを取りたくない場面」
align="end"(右寄せ)/ "start"(左寄せ)で content の位置を制御
↑↓ キーで項目移動、Enter / Space で実行、Esc で閉じる(Radix が標準対応)
アイコンはすべて Bold weight で統一(Icon コンポーネントの既定値)
色・余白は Thinca tokens 化済み(--bg-surface / --text-primary / --overlay-hover / --shadow-layer-1 等)

使い分け

DropdownMenu (text): ヘッダー右端の「設定」「ユーザーメニュー」など、ボタンに明示的なラベルが必要な場面
DropdownMenu (icon): テーブル行 / カードの「⋮」三点リーダー。コンパクト
Popover: 任意の content(お知らせ一覧 / フォーム / 設定 / フィルター)。click で開き、中身は動詞ではなく名詞や複合コンテンツ
NavigationMenu: サイト全体のナビゲーション(複数階層)