モバイルメニュー（概要）

モバイルデバイスなど、タッチスクリーンでのタップ操作を考慮したメニュー用コンポーネントで、ハンバーガーメニューボタン、ドロワーとともに使用されます。

仕様

モバイル画面では、コンテンツ中にサイト内移動のための関連リンクが省略されることも多く、モバイルメニューからのみ遷移できるページがある場合があります。そのため、非常に重要なコンポーネントであるといえます。

モバイルメニューの形式にはスライド型とアコーディオン型が多く使用されています。スライド型は第二階層を配置したい場合や、多くのメニュー項目がある場合に適しています。
スライド型とアコーディオン型を混在させることはユーザーに複雑な操作性を与えることになり、ユーザビリティ的には奨励できません。
メニューの階層構造は２段階以上のメニュー構成を作らないよう情報設計をしてください。

通常メニュー内のアイテムはそのほとんどがリンクやインタラクションのためのアイテムになりますが、リンクを強調し、視覚的に明確にしたい場合はエンドアイコンを使用します。
通常のリンクを強調して示すエンドアイコンと、機能的に異なった第二階層リンク（スライド型）やアコーディオンを示すアイコンと混在させることは、視覚的、体験的に複雑さや認知負荷を与えるため、できる限り使用しないでください。

メニュー内のリンク（ページ遷移）とアコーディオン（サブメニューの開閉）など、ユーザーに異なった挙動を想定させる場合は、その表示を明確に違うものにする必要があります。
エンドアイコンをともなう強調リンクとサブメニューを開閉するアコーディオンをやむを得ず混在させる場合は、両者を明確に異なったアイコンを使用することが求められます。
ただし、サイト内でのアイコンの仕様は挙動別に一貫性を保ってください。

リンクとアコーディオンという異なった機能を、明確に異なるアイコンで示しているため、挙動が違うことを想定できる。

リンクとアコーディオンという異なった機能を、シェブロン（矢印アイコン）の向きの違いで表現しているため、ふたつの機能の混在を一目で把握するには認知負荷が高い。

セクションをより明確にしたい場合は以下のUIを利用します。

ディバイダー

セクションアイコン