本文へ移動
デジタル庁
デザインシステムβ版

メニュー

ハンバーガーメニューボタン（概要）

スクリーンショット：ヘッダーエリアに配置されたハンバーガーメニューボタンの3つのパターン。

ハンバーガーメニューボタンは画面スペース資源に制限のある、主にモバイルデバイスで使用されるモバイルメニューを表示するためのトリガーとなるボタンです。

仕様

デスクトップ・モバイル共通コンポーネント

スクリーンショット：デスクトップ・モバイル共通コンポーネント。縦に3本並んだ水平線のアイコンと、その右隣に「メニュー」のテキストが配置され、ひとつの横長のハンバーガーメニューボタンが構成されている。メニューを開くとアイコンはバツマーク、横のテキストは「閉じる」に変化する。

ハンバーガーメニューボタンは画面スペース資源に制限のある、主にモバイルデバイスで使用されるモバイルメニューを表示するためのトリガーとなるボタンです。

ハンバーガーメニューボタンはラベル付きで明示的に表示され、簡単に見つけられるようにすることが重要です。

モバイル条件付きコンポーネント

スクリーンショット：モバイル条件付きコンポーネント。縦に3本並んだ水平線のアイコンと、その下部に「メニュー」のテキストが配置され、ひとつの正方形に近いハンバーガーメニューボタンが構成されている。メニューを開くとアイコンはバツマーク、下のテキストは「閉じる」に変化する。テキストラベルの「メニュー」および「閉じる」は、英語の「MENU」および「CLOSE」に変化するバリエーションも表されている。

ヘッダーの領域が限定され、デスクトップ・モバイル共通コンポーネントを使用するために十分な領域が確保できない場合に限り、条件付きコンポーネントを使用してください。

なお、表示する画面のページ言語に合わせて、「メニュー」タイプと「MENU」タイプを使い分けます。

使い方

配置

ハンバーガーメニューボタンはヘッダーエリアの左端、または右端に配置します。

原則として、ハンバーガーアイコンとテキストラベルの組み合わせから成るデスクトップ・モバイル共通コンポーネントを使用します。

ヘッダーエリアでの配置例

スクリーンショット：ハンバーガーメニューボタンがヘッダーエリアの左端または右端に配置されている。