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

水平メニューから呼び出される、メニューリスト以外のコンテンツも内包できる領域が大きい、表示内容の幅的自由度の高いドロップダウンのバリエーションです。
メニューリストだけでなく、画像や説明文などのコンテンツも含めることができます。

ユースケース

デスクトップ表示で第二階層以下のメニューを一覧表示するとき: デスクトップ表示で、水平メニューから第二階層以下のメニューを開いて一覧表示する場合に使用します。広い表示領域を生かして、リンクに説明文や画像などの補足コンテンツを添えられます。モバイル表示では、ハンバーガーメニューボタンとモバイルメニューを組み合わせて使用してください。

ホバーでメガメニューパネルを開かない: マウスカーソルを重ねただけでメガメニューを開かないでください。ホバーでしか開けないメガメニューは、キーボードやタッチデバイスでは開けません。メガメニューは、水平メニューの項目を選択したときに開いてください。また、水平メニューの項目からは第二階層ページへは行けないので、メガメニューのパネル内に第二階層ページへのリンクを含めてください。
第三階層のリンクをすべて並べられない場合はメガメニューを使わない: メガメニューには、第二階層に属する第三階層のリンクをすべて表示してください。すべてを並べられない場合は、メガメニューを使わないでください。利用者は、メガメニューに表示されているものが第三階層のすべてだと受け取るため、表示されなかったページに気づけません。