アイコン縦サイドバーナビ
アイコンだけを縦に並べた、幅の狭いサイドバーナビです。バーは flex-direction: column でボタンを縦積みにし、各ボタンにマウスを乗せると右側にラベルがふきだしのように出ます。
解説
アイコンだけを縦に並べた、幅の狭いサイドバーナビです。バーは flex-direction: column でボタンを縦積みにし、各ボタンにマウスを乗せると右側にラベルがふきだしのように出ます。このツールチップは ::after 疑似要素で content: attr(data-tip) を読み込んで描画しており、JavaScript を使わず CSS だけで完結しています。通常は opacity:0 で隠し、:hover 時に表示する仕組みです。アイコンは外部フォントに依存しないインライン SVG で入っています。
使いどころ
- 管理画面や SaaS ダッシュボードの、画面幅を節約したい常設ナビ
- 項目数が少なく、アイコンで意味が伝わるツール系アプリ
- メインコンテンツを広く取りたい作業画面のサイドメニュー
ラベルは各ボタンの data-tip 属性を書き換えるだけで変更できます。アイコンだけだと意味が伝わりにくいので、ホバーで出るツールチップは省略しないでください。アクセシビリティ上は、各ボタンに aria-label を付けて読み上げに対応させると親切です。タッチ端末ではホバーが効かない ため、スマホ向けには常時ラベル表示や別ナビへの切り替えを検討します。配色はバーの background とアイコン色を変えればブランドに合わせられます。
使用例・適したシーン
- コーポレートサイトのグローバルナビ
- EC サイトのヘッダー
- SaaS の管理画面
- モバイル向け Web アプリ
よくある質問
ツールチップの文言はどこで変えますか？
各ボタンの data-tip 属性の値を書き換えてください。CSS が content: attr(data-tip) でその文字列を読み込み、ホバー時にふきだしとして表示します。JavaScript の編集は不要で、HTML の属性だけで管理できます。
アイコンだけだと意味が伝わるか不安です。
ホバーで出るツールチップを必ず残し、加えて各ボタンに aria-label を付けると、視覚と読み上げの両方で意味が伝わります。タッチ端末ではホバーが効かないため、スマホ向けには常時ラベルを表示するか、横展開できる別ナビへ切り替えると親切です。