§05-07Search & Navigation
メガメニュー
複数列に項目を並べた大型のドロップダウンを開く。
階層の深いサイトで下位の項目まで一度に見せる。カテゴリ数が多く、通常のメニューでは階層を何度も開かせてしまうときに向く。
実装のポイント
ホバーで開く場合は閉じる前に短い遅延を入れ、斜め移動でメニューが消えないようにする。クリックと Esc にも対応し、aria-expanded を付ける。
- 特徴
- キーボード操作
- デモで使っているもの
- lucide-react
§05-07Search & Navigation
複数列に項目を並べた大型のドロップダウンを開く。
階層の深いサイトで下位の項目まで一度に見せる。カテゴリ数が多く、通常のメニューでは階層を何度も開かせてしまうときに向く。
ホバーで開く場合は閉じる前に短い遅延を入れ、斜め移動でメニューが消えないようにする。クリックと Esc にも対応し、aria-expanded を付ける。