jui-sidebar | Jellee Docs

アプリケーションの主要なナビゲーションを提供するサイドバーコンポーネントです。メニュー項目のグループ化や折りたたみに対応します。

Basic

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

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

機能	用途	Chrome	Firefox	Safari	ステータス
CSS Grid	サイドバー全体の 3カラム（ヘッダー/ナビ/フッター）レイアウト	57+	52+	10.1+	Baseline 2017
`::slotted()`	ヘッダーおよびフッターに配置されたロゴやユーザー情報の配置・スタイル制御	53+	63+	10+	Baseline 2020
CSS 変数 (`var()`)	デザイントークン（背景色、ボーダー、折りたたみアニメーション時間等）適用	49+	31+	9.1+	Baseline 2017

💡 いずれの機能も主要ブラウザで広く対応済みです。

WAI-ARIA:
- ルートの nav 要素に role="navigation" および aria-label="サイドバーナビゲーション"（または nav-label Prop値）が付加されます。
- 折りたたみ可能である場合、トグルボタンに aria-expanded="true"（展開時）または aria-expanded="false"（折りたたみ時）が動的に設定され、現在サイドバーが開いているかどうかが支援技術に伝わります。また、ボタンのラベルには collapse-label / expand-label による多言語対応可能なアクセシブルな名前が設定されます。
- アクティブなメニュー項目は aria-current="page" などを用いて支援技術に現在のページであることが示されます。
キーボードナビゲーション:
- メニュー項目（リンク）や折りたたみトグルボタンは Tab キーでフォーカス移動が可能です。
- ハイライトされた項目は Enter または Space キーで実行できます。

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークンを参照してスタイルが適用されます。

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

Property	Attribute	Description	Type	Default
`activeKey`	`active-key`	アクティブなメニューキー	`string`	`''`
`collapseLabel`	`collapse-label`	折りたたみラベル（i18n対応）	`string`	`'Collapse menu'`
`collapsed`	`collapsed`	折りたたみ状態	`boolean`	`false`
`collapsedWidth`	`collapsed-width`	サイドバー幅（折りたたみ時）	`string`	`'64px'`
`collapsible`	`collapsible`	折りたたみ可能か	`boolean`	`true`
`expandLabel`	`expand-label`	展開ラベル（i18n対応）	`string`	`'Expand menu'`
`items`	`items`	メニュー項目（JSON文字列 or 配列）	`SidebarItem[] \| string`	`'[]'`
`navLabel`	`nav-label`	ナビゲーションラベル（i18n対応）	`string`	`'Sidebar navigation'`
`variant`	`variant`	バリアント: default（ツリーメニュー）/ docs（ドキュメントナビ）/ minimal（ミニマル）/ floating（浮遊）/ transparent（透過）	`"default" \| "docs" \| "floating" \| "minimal" \| "transparent"`	`'default'`
`width`	`width`	サイドバー幅（展開時）	`string`	`'260px'`

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

Event	Description	Type
`juiCollapse`	折りたたみ状態が変更された時	`CustomEvent<{ collapsed: boolean; }>`
`juiSelect`	メニュー項目が選択された時	`CustomEvent<{ key: string; item: SidebarItem; }>`

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

Slot	Description
`"footer"`	サイドバー下部（ユーザー情報等）
`"header"`	サイドバー上部（ロゴ等）

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

Built with StencilJS