Dropdown Menu

ボタンやアバターをトリガーに、関連する操作をまとめて表示するメニュー。画面上に常時並べるほどではない補助的な操作の置き場所に使う。ジョブアンテナでは求人カードの操作、ヘッダーのマイページメニュー、求人一覧の並び替えに使う。

基本

通常項目・サブメニュー・破壊的操作を組み合わせた基本形。DropdownMenuTrigger は render プロップに Button を渡してトリガーにする。

アバター付きボタンをトリガーにしたマイページメニュー。DropdownMenuLabel でアカウント情報を示し、未読メッセージ数は ml-auto の Badge で右端に表示する。

求人一覧の並び順を DropdownMenuRadioGroup で単一選択する例。defaultValue で初期値を指定し、align="end" でトリガーの右端に揃える。