Dropdown

クリックで展開されるメニューを提供するコンポーネント。アクションの一覧やコンテキストメニューに使用します。

Basic

jui-dropdown の最も基本的な使用例です。

関連コンポーネント

• Button — ユーザーがアクションを実行するためのボタンコンポーネント
• Popover — 要素に対してポップオーバーを表示するコンポーネント
• Select — 選択肢から1つを選択するセレクトコンポーネント

アクセシビリティ

• WAI-ARIA:
  • トリガー要素に aria-haspopup="menu" と aria-expanded 属性が自動設定され、メニューの開閉状態が支援技術に伝わります。
  • メニューコンテナには role="menu" が設定され、各メニュー項目には role="menuitem" が付与されます。
  • 無効な項目には aria-disabled="true" が自動で付与されます。
• キーボードナビゲーション:
  • トリガーにフォーカスした状態で Enter、Space、ArrowDown キーでメニューを開きます。
  • メニュー展開中は ArrowDown / ArrowUp で項目を移動、Home / End で先頭・末尾にジャンプできます。
  • Enter または Space でフォーカス中の項目を選択します。
  • Escape キーでメニューを閉じ、フォーカスはトリガーに戻ります。

CSS カスタムプロパティ

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークン（--jui-color-background, --jui-color-text, --jui-radius-md, --jui-shadow-lg 等）を参照してスタイルが適用されます。

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
color-mix()	ホバー/フォーカス色生成	111+	113+	16.4+	Baseline 2023
:focus-visible	キーボードフォーカスリング	86+	85+	15.4+	Baseline 2022

💡 いずれの機能も Baseline 2022〜2023 に到達しており、主要ブラウザで広く対応済みです。

Baseline 情報

機能	Baseline 達成	Widely Available 予定
color-mix()	2023年	2025年後半 ✅
:focus-visible	2022年	2024年後半 ✅

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
items	items	メニュー項目（JSON文字列 or 配列）	DropdownItem[] | string	'[]'
menuLabel	menu-label	メニューラベル（i18n対応）	string	'メニュー'
placement	placement	配置方向	"bottom-end" | "bottom-start" | "top-end" | "top-start"	'bottom-start'

イベント

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
juiSelect	メニュー項目が選択された時	CustomEvent<{ key: string; item: DropdownItem; }>

スロット

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
"trigger"	トリガー要素（ボタン等）

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
"item"	メニュー項目
"menu"	メニューコンテナ
"separator"	セパレータ

---

Built with StencilJS