ナビ・リスト操作
サイドバーナビ
セクション見出し付きの縦型ナビ。折りたたみグループはクリックで開閉し、現在の項目は藍色でハイライトされる。管理画面やダッシュボードの定番。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
折りたたみは高さアニメを grid-template-rows: 0fr→1fr で行い、開閉状態は aria-expanded に持たせています（サブメニューを aria-controls で関連付け）。現在地の項目には aria-current="page" を付けるのが定石です。
コード（コピーして使えます）
<nav class="sn" aria-label="サイドバー">
<p class="sn-heading">メニュー</p>
<a class="sn-item is-active" href="#" aria-current="page">
<svg class="sn-ic" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
ダッシュボード
</a>
<a class="sn-item" href="#">
<svg class="sn-ic" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><rect x="7" y="11" width="3" height="6"/><rect x="13" y="7" width="3" height="10"/></svg>
分析
</a>
<p class="sn-heading">管理</p>
<div class="sn-group">
<button class="sn-toggle" aria-expanded="false" aria-controls="sn-sub">
<span class="sn-toggle-in">
<svg class="sn-ic" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7 4 7"/><path d="M20 12 4 12"/><path d="M20 17 4 17"/></svg>
コンテンツ
</span>
<svg class="sn-caret" width="14" height="14" viewBox="0 0 14 14" fill="none"><polyline points="4,3 8,7 4,11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<div class="sn-sub" id="sn-sub">
<div class="sn-sub-inner">
<a class="sn-subitem" href="#">記事</a>
<a class="sn-subitem" href="#">カテゴリ</a>
<a class="sn-subitem" href="#">タグ</a>
</div>
</div>
</div>
<a class="sn-item" href="#">
<svg class="sn-ic" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.4-2.3 1a7 7 0 0 0-2-1.2L14.2 3H9.8l-.4 2.5a7 7 0 0 0-2 1.2l-2.3-1-2 3.4 2 1.5A7 7 0 0 0 5 12a7 7 0 0 0 .1 1.2l-2 1.5 2 3.4 2.3-1a7 7 0 0 0 2 1.2l.4 2.5h4.4l.4-2.5a7 7 0 0 0 2-1.2l2.3 1 2-3.4-2-1.5A7 7 0 0 0 19 12z"/></svg>
設定
</a>
</nav>