Dropdown ドロップダウンメニュー

アクションメニューをトリガーの下に折りたたみ、ホバーまたはクリックで展開します。メニューは role="menu" セマンティクスで、完全なキーボードナビゲーション（方向キー / Home / End / Enter / Esc）と roving tabindex をサポートします。

基本的な使い方

ホバー / クリックトリガーと命令的使い方

import { LhButton, LhDropdown, LhDropdownItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhDropdown
      onCommand={(command) => console.log(command)}
      dropdown={
        <>
          <LhDropdownItem command="new">新規作成</LhDropdownItem>
          <LhDropdownItem command="delete" disabled>
            削除
          </LhDropdownItem>
        </>
      }
    >
      <LhButton>展開</LhButton>
    </LhDropdown>
  )
}

プロパティ	説明	型	使用可能な値	デフォルト値
children	トリガーノード	`ReactNode`	—	—
dropdown	メニュー内容（`LhDropdownItem` のリスト。plus の `#dropdown` スロットに対応）	`ReactNode`	—	—
trigger	トリガー方式	`'hover' \| 'click' \| 'contextmenu'`	—	`'hover'`
placement	表示位置	`LhDropdownPlacement`	`top` / `bottom`（`-start` / `-end` を含む）など	`'bottom-start'`
disabled	無効	`boolean`	—	`false`
visible	制御された表示状態	`boolean`	—	—
defaultVisible	非制御のデフォルト表示	`boolean`	—	`false`
hideOnClick	メニュー項目クリック後に自動的に閉じるかどうか	`boolean`	—	`true`
maxHeight	メニューの最大高さ（超えるとスクロール）	`string \| number`	—	—
popperClass	メニューのカスタムクラス名	`string`	—	—
themeVars	コンポーネントレベルのテーマ変数	`Record<string, string>`	—	—
sx	クイックレイアウトプロパティ（トリガーに作用）	`SxProps`	—	—

イベント	説明	コールバックシグネチャ	Vue 対応
onCommand	メニュー項目がクリックされ、その項目の `command` を送出	`(command: string \| number) => void`	`command`
onVisibleChange	表示状態の変化	`(visible: boolean) => void`	`update:visible`
onClickOutside	メニューの外側をクリック（内部では同時に閉じる）	`() => void`	`click-outside`

DropdownItem Props

プロパティ	説明	型	使用可能な値	デフォルト値
children	メニュー項目の内容	`ReactNode`	—	—
command	コマンド識別子。`onCommand` と一緒に送出	`string \| number`	—	—
disabled	無効にするかどうか（クリックに応答せず、キーボードナビゲーションにも参加しない）	`boolean`	—	`false`
divided	区切り線を表示するかどうか	`boolean`	—	`false`

DropdownItem イベント

イベント	説明	コールバックシグネチャ	Vue 対応
onClick	メニュー項目のクリック（`onCommand` と共存可能）	`() => void`	—

ref

forwardRef<LhDropdownInstance>。LhDropdownInstance は show() / hide() / toggle() / isVisible を公開します。

キーボードナビゲーション（APG menu pattern）

メニューを開くとフォーカスは最初の有効項目に置かれます。ArrowUp / ArrowDown で循環移動し無効項目をスキップ、 Home / End で先頭 / 末尾にジャンプ、Enter / Space で現在項目をアクティブ化、Esc で閉じてフォーカスをトリガーに返します。アンカー項目のみ tabIndex={0}、それ以外は -1 です（roving tabindex）。

スロット → prop

plus は #dropdown スロットでメニューを担いますが、React 側では同名の dropdown prop に変更しました。 contextmenu トリガーはブラウザのデフォルト右クリックメニューを抑止します。

スタイル

import '@lh-ui/react/style/dropdown'

基本的な使い方​

Dropdown Props​

Dropdown イベント​

DropdownItem Props​

DropdownItem イベント​

ref​

スタイル​

基本的な使い方

Dropdown Props

Dropdown イベント

DropdownItem Props

DropdownItem イベント

ref

スタイル