ナビゲーション / 現在地
Sidebar
現在地と文書全体の構成を、すぐ手の届く場所に置きます。
基本的な使い方
HTML
<nav aria-label="ナビゲーションの作例">
<div class="sidebar-section"><p class="sidebar-title">一覧とデータ</p>
<ul class="sidebar-list"><li class="is-active"><a href="../sidebar/" aria-current="page">Sidebar</a></li>
<li><a href="../table/">Table</a></li><li><a href="../chip/">Chip</a></li></ul>
</div>
</nav>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.sidebar | doc直下に置く、スクロール可能なナビゲーション領域。 |
.sidebar-section / .sidebar-title / .sidebar-list | グループ、その見出し、リンク。 |
.is-active / aria-current="page" | 現在のページをバーとアクセシブルな状態の両方で示します。 |
.sidebar-context / data-dd-toc | ページ内目次。任意のスクリプトが現在の見出しを追跡します。 |
使い方の注意
この例はサイドバーの内容だけを示します。完全なページではdoc内のnavにsidebarを付け、Topbarにモバイル用の切り替えを追加します。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。