Sidebar サイドバー · `kf-side`

左に置く画面の切り替え。ヘッダの横並びでは足りないとき(7 つ以上、または階層があるとき)に使う。

クラスkf-badgekf-mainkf-shellkf-sidekf-side-group

HTML

<div class="kf-shell">
  <nav class="kf-side">
    <div class="kf-side-group"><span class="l">はじめに</span><a href="#" class="is-current">ホーム</a><a href="#">一覧<span class="kf-badge">12</span></a></div>
    <div class="kf-side-group"><span class="l">記録</span><a href="#">履歴</a><a href="#">設定</a></div>
  </nav>
  <main class="kf-main"><p>ここに画面の中身。</p></main>
</div>

kf-shell(左 240px と残り)の中に nav.kf-side と main.kf-main。ヘッダはその上に置く。
項目は kf-side-group でまとめ、span.l に小さな見出し。現在地は is-current(accent-soft の地、ink-strong)。
件数は右端に kf-badge。
幅 240px、項目の高さ 32px、地は surface、右に line の 1px。影は付けない。
900px より狭い画面では上に積む(kf-shell が 1 列になる)。
ヘッダの切り替えと両方は置かない。どちらか 1 つ。
長いサイドバーはページを移っても同じ位置に見えるようにする。スクロール位置を sessionStorage に覚え、次のページで戻す(このサイトの実装が例)。

Sidebar サイドバー · kf-side

Sidebar サイドバー · `kf-side`