Dropdown Menu

Newv0.3.0

クリックで表示されるドロップダウンメニュー。アクションやナビゲーションの選択肢を提供します。

基本的な使い方

ボタンクリックでメニューを表示

tsx

class="token keyword">import {
  DropdownMenu,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">DropdownMenu>
  <class="token tag">div q:slot=class="token keyword">class="token string">"trigger">
    <class="token tag">Button variant=class="token keyword">class="token string">"outline">Open Menu</class="token tag">Button>
  </class="token tag">div>
  <class="token tag">DropdownMenuLabel>My Account</class="token tag">DropdownMenuLabel>
  <class="token tag">DropdownMenuSeparator />
  <class="token tag">DropdownMenuItem>Profile</class="token tag">DropdownMenuItem>
  <class="token tag">DropdownMenuItem>Settings</class="token tag">DropdownMenuItem>
  <class="token tag">DropdownMenuSeparator />
  <class="token tag">DropdownMenuItem>Log out</class="token tag">DropdownMenuItem>
</class="token tag">DropdownMenu>

ショートカットキー付き

キーボードショートカットの表示

tsx

<class="token tag">DropdownMenu>
  <class="token tag">div q:slot=class="token keyword">class="token string">"trigger">
    <class="token tag">Button>Actions</class="token tag">Button>
  </class="token tag">div>
  <class="token tag">DropdownMenuItem>
    New File
    <class="token tag">DropdownMenuShortcut>⌘N</class="token tag">DropdownMenuShortcut>
  </class="token tag">DropdownMenuItem>
  <class="token tag">DropdownMenuItem>
    Open
    <class="token tag">DropdownMenuShortcut>⌘O</class="token tag">DropdownMenuShortcut>
  </class="token tag">DropdownMenuItem>
</class="token tag">DropdownMenu>

破壊的アクション

削除などの危険な操作を強調

tsx

<class="token tag">DropdownMenu>
  <class="token tag">div q:slot=class="token keyword">class="token string">"trigger">
    <class="token tag">Button variant=class="token keyword">class="token string">"outline">More Options</class="token tag">Button>
  </class="token tag">div>
  <class="token tag">DropdownMenuItem>Edit</class="token tag">DropdownMenuItem>
  <class="token tag">DropdownMenuItem disabled>Archive</class="token tag">DropdownMenuItem>
  <class="token tag">DropdownMenuSeparator />
  <class="token tag">DropdownMenuItem destructive>Delete</class="token tag">DropdownMenuItem>
</class="token tag">DropdownMenu>

アイコンボタンのトリガー

コンパクトなメニュートリガー

DropdownMenu Props

Props API

Prop	Type	Default	Description
`open`	`boolean`	-	開閉状態（制御モード）
`onOpenChange$`	`(open: boolean) => void`	-	状態変更時のコールバック

DropdownMenuItem Props

Props API

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	無効状態
`destructive`	`boolean`	`false`	破壊的アクションのスタイル（赤色）
`onClick$`	`() => void`	-	クリックハンドラー

Accessibility

Escape キーでメニューを閉じる
外部クリックで閉じる
Tab キーでアイテム間を移動
Enter/Space でアイテムを選択
aria-haspopup と aria-expanded で状態を伝達