水平メニュー（概要）｜デジタル庁デザインシステムβ版

水平メニューは、利用者を目的のページに誘導したり、コンテンツをわかりやすく表示するためのものです。ウェブサイトやアプリの中で一貫して表示し、回遊のための導線とします。

ユースケース

メニューを水平に並べるとき: メニュー項目を横に並べることで、ユーザーが主要なナビゲーションを一目で把握できるようにします。縦方向に並べるときはメニューリストを使用します。
サイトやアプリのカテゴリ・目的地へ誘導するとき: トップページ、サービス一覧、お知らせなど、グローバルナビゲーションとしてサイトやアプリ内のカテゴリや目的地へのリンクを並べます。
関連する複数のリンクをまとめて提示するとき: 項目にサブメニューを持たせ、関連する複数のリンクをまとめて提示できるようにします。

項目数が多すぎる場合は整理する: 水平メニューに多くの項目を並べると、ユーザーは目的のページを見つけにくくなります。項目を整理し、必要に応じて階層化を検討してください。
モバイル画面での表示を考慮する: 画面幅が狭いデバイスでは、水平メニューの内容をハンバーガーメニューボタンとモバイルメニューで表示することを検討してください。
ラベルには遷移先のページ名を使う: 項目のラベルには、遷移先のページ名を使用してください。「詳細」「その他」のような抽象的な表現は避けてください。
同じ主題のコンテンツを切り替える場合はタブを使う: 同じ主題のコンテンツを、概要・仕様・レビューなどの観点で切り替える場合は、水平メニューではなくタブを使用してください。