§05-08Search & Navigation
サイドバー nav
階層のあるページ構成をサイドバーのツリーで示す。
ドキュメントやプロジェクトの構造を常に見渡しながら移動できる。階層が深く、現在位置を把握しづらいアプリに向く。
実装のポイント
再帰コンポーネントで各フォルダが開閉状態を持つ。role=「tree」と aria-expanded を付け、矢印キーで開閉と移動ができるようにする。
- 特徴
- 状態管理
- デモで使っているもの
- lucide-react
§05-08Search & Navigation
階層のあるページ構成をサイドバーのツリーで示す。
ドキュメントやプロジェクトの構造を常に見渡しながら移動できる。階層が深く、現在位置を把握しづらいアプリに向く。
再帰コンポーネントで各フォルダが開閉状態を持つ。role=「tree」と aria-expanded を付け、矢印キーで開閉と移動ができるようにする。