タブ切替メガメニュー

このパーツの使いどころと実装ポイント

このパーツは、左にタブ、右に内容を表示する2カラム構成のメガメニューです。外枠を display:grid の grid-template-columns:200px 1fr で固定幅のタブ列と可変幅の本体に分け、本体側はさらに repeat(3,1fr) の3カラムで「カテゴリ」「新着」「ブランド」を並べます。選択中のタブは is-act クラスで border-left をアクセント色に変え、現在地を示します。

向いている場面

商品カテゴリが多い EC サイトのグローバルナビ、ジャンルの深いメディアのメニュー、サービス種別が多い BtoB サイトなど、大量のリンクを階層立てて見せたい場面に向きます。レディース・メンズのように一次分類をタブ、二次分類を本体に置くと、ユーザーが目的の階層へ素早く到達できます。

カスタマイズと注意点

• サンプルのタブ切替は見た目のみで、実際にはタブのクリックで本体の内容を差し替える JS が必要です。各タブに対応するパネルを用意し、表示を切り替えます。
• スマホでは横2カラムが入りません。狭い画面ではタブを上部の横スクロール、本体を縦積みに変えるのが定石です。
• キーボード操作に対応するなら、タブに role="tab" と矢印キー移動を加えるとアクセシビリティが向上します。