ガイドライン
サイドナビゲーションはページのナビゲーションを配置するために使用するコンポーネントです。
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Section Title | ナビゲーション項目のセクションタイトル | — | |
| 2 | Units | ナビゲーション項目のユニット要素 | — |
Item
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Icon | ラベルの前に配置するアイコン要素 | Icon | — |
| 2 | Label | ナビゲーション項目にコンテキストを付与するためのテキスト要素 | — | |
| 3 | Badge | バッジ要素 | 任意 |
Options: 選択肢
isSectionTitle
False (Default)
セクションタイトルが非表示のデフォルトの状態です。
True
セクションタイトルを有効化するためのオプションです。
セクションにタイトルが必要な場合はタイトルを表示します。
isSelected
False (Default)
メニューが選択されていないデフォルトの状態です。
True
メニューが選択されている状態です。
表示されているコンテンツを示すナビゲーション項目が選択された状態になります。
isExpanded
False
サイドナビゲーションが縮小されて表示された状態です。状況に応じてサイドナビゲーションの拡張性を切り替えることができます。
True (Default)
サイドナビゲーションが拡張されたデフォルトの状態です。
isBadge
False (Default)
バッジが表示されていないデフォルトの状態です。
True
バッジが表示されている状態です。ナビゲーション項目には、バッジを付けることができます。ユーザーがバッジを完全に無視しないように、ユーザーに通知する頻度と、通知バッジをトリガーとするコンテンツの種類に注意してください。
States: 状態
Enable
ユーザーが操作を行う前のデフォルトの状態。
Hover
ユーザーがナビゲーション項目にマウスオーバーしている状態。
Active
ユーザーがナビゲーション項目を操作している状態。
Focus
ユーザーがタッチ操作や、キーボードや音声による操作を用いてナビゲーション項目に注視している状態。
Disabled
システムによってナビゲーション項目が非活性化されている状態。ユーザーによる操作は不能です。
Behaviors: 振る舞い
柔軟な幅と最小幅
サイドナビゲーションの幅は柔軟であるため、状況に応じて適した幅を選択してください。
最小幅はアイコンのみを表示した場合の64pxです。
テキストオーバーフロー
ナビゲーション項目のテキストが利用可能な水平スペースに対して長すぎる場合は、折り返して別の行するか、3点リーダーを表示してツールチップで補足するかを選択することができます。
Metrics: 寸法
Units
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
Item
- Vertical Resizing: Hug
- Horizontal Resizing: Fill
- Item Spacing: 8px
- padding Vertical: 4px
- padding Horizontal: 8px
Usage: 使い方
単一のナビゲーションメニューとして使用してください。
ナビゲーション内で階層的に使用しないでください。ユーザーが識別しづらくなります。
限られた幅で表示する際はアイコンのみの表示に切り替えることができます。
ラベルがある状態で幅を狭くしすぎないでください。ユーザーがサイドナビゲーションをボタンやその他のコントロールと混同する可能性があります。
Contents: 内容
簡潔で説明的なタイトルをつけてください。
タイトルは切り捨てが必要なほど長くしないでください。冗長で理解しづらいタイトルはユーザビリティの問題を引き起こします。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2025/06/03 | アイコンカラーの調整 |
| 2023/12/21 | 初版を公開 |
