DropdownMenu

ボタンのクリックで展開するアクションメニュー。編集・複製・削除などの二次的なアクションをグループにまとめて、画面を整理したいときに使う。

インストール

npx shoji add dropdown-menu

プレビュー

配置

使用例

アカウントメニュー・ソート・フィルターなど、複数の選択肢をコンパクトに収めたいときに使う。 グループ（DropdownMenuGroup）で関連する項目をまとめ、セパレーターで区切る。

使い方

こんなときに使う

  • 「…」ボタン（3点リーダー）からの二次アクション群
  • ソート・フィルターの選択（radio/checkboxタイプのメニュー項目）
  • ユーザーアカウントメニュー（プロフィール・設定・ログアウト）

使わないほうがいい場面

  • メインアクションをドロップダウンの中に隠す（重要なアクションは常時表示）
  • 選択肢が2〜3個の場合（ボタンを並べるほうが分かりやすい）

JP 最適化のポイント

  • メニュー項目の日本語ラベルは動詞で終わる — 「削除」より「削除する」のほうが操作意図が明確
  • 破壊的なアクション（削除など）はメニューの最下部に配置し、Separator で分離する