Side Navigation
Dictionary
役割と種類
デスクトップや大型タブレットなどの大きな画面かつ横方向の画面遷移が必要な場合に使用します。
画面の端に3つ以上の遷移先が表示され、内部はHeader、Bodyで構成されます。BodyにInteractive Listを持ち、タップするとInteractive List Itemが示す最上位の遷移先に移動します。
Header（オプション）
アプリケーションのタイトル、ブランドロゴ、アカウント切り替えなどに使用できる柔軟なスペースです。
App Barでアプリケーションのタイトル、ブランドロゴを設置している場合は役割が重複するため、Headerにブランド表現を入れないでください。ただし、App Barに画面のタイトルが入っている場合は役割が重複しないため、この限りではありません。
Body
Interactive Listを設置して横方向の画面遷移を促します。
いつ使うべきか / 使わないべきか
アプリケーションのどこからでもアクセスできる必要がある最上位の遷移先が3つ以上ある場合、かつデスクトップまたは大型タブレットの場合に、Side Navigationの使用が推奨されます。
Bottom Navigationを使用したほうがよい場合
モバイルなどの小さな画面で、かつ遷移先が5つまでに収まる場合は、小さな画面のコンテキストに適したBottom Navigationを使用してください。
Navigation Drawerを使用したほうがよい場合
モバイルなどの小さな画面で、かつ遷移先が5つを超える場合は、優先順位をつけた上で上位5つをBottom Navigation、それ以外のものをNavigation Drawerに配置します。
インタラクション
スクロールする
垂直方向にスクロールできます。コンテンツがSide Navigationの高さよりも長い場合は、コンテンツをSide Navigation内でスクロールできます。その場合、Headerは固定するかどうか選択できます。
スタイル
外観
Header
fixed
true / false
HeaderをFixedにすることができます。
ステート
Body内部のステートはInteractive Listに準じます。
注意点
子階層を表示する
Navigation系のコンポーネントのうち、Side Navigationだけは大きな画面サイズで使用する特性上、現在Activeになっている画面に限り、子階層をインデントして表示することができます。
このようにすることで、各子階層にアクセスしやすくなります。
しかし、モバイルサイズのときには画面サイズの関係上、子階層を表示できません。そのため、ここからしか遷移できないようにするべきではなく、Tabやコンテンツ内のリンクからも該当の子階層に遷移できるようにするべきです。
あくまで補助的なナビゲーションとして捉えてください。
Badgeの使用について
Interactive ListのItemのアイコンや画像の右上にBadgeを配置できます。Badgeには、通知数などの動的な情報を表示できます。
状態に応じてInteractive ListのItemを削除したりDisabledにしない
Navigationはなくなったり、場所が変わったり、使用できる場合と使用できない場合があると、一貫性がなくなり、ユーザーが予測しづらくなります。すべてのItemを常に有効にし、遷移先にコンテンツがない場合は適切なEmpty Stateを用意します。