kaze風
Sidebar
サイドバーナビゲーション
プレビュー
使いどころ
使う場面
- アプリ全体の主要な移動先を、画面の左に常に並べる
- NavItem の active で現在のページを示す。href を渡すと <a>、渡さないと <button> になる。Next.js の Link は asChild で包む
- 項目が多いときは SidebarGroupLabel でまとめ、SidebarDivider で区切る
使わない場面
- ページ内の切り替え。Tabs を使う
- 移動先が 5 個以下の小さなサイトや LP。Navbar か TopBar を使う
- 操作の実行（保存、削除など）を並べること。Button や Dropdown を使う
- 階層が深いナビゲーション。1 段のグループまでにとどめ、深い階層は Breadcrumb と併用する
使い方
<Sidebar logo={<Logo />}>
<NavItem icon={<Home />} active>ダッシュボード</NavItem>
<NavItem icon={<Settings />}>設定</NavItem>
</Sidebar>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
children必須 | ReactNode | なし | ナビゲーション項目など |
logo | ReactNode | なし | サイドバー上部に表示するロゴ要素 |
footer | ReactNode | なし | サイドバー下部のフッター要素 |
navLabel | string | なし | Accessible name of the <nav> landmark (default: "メインナビゲーション") |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab / Shift + Tab | ナビゲーション項目に順番にフォーカスを移す |
| Enter | リンクやボタンを開く（Space はボタンの項目のみ） |
アクセシビリティ
- <aside> の中に <nav> があり、既定の名前は「メインナビゲーション」。ページ内に複数の nav があるときは navLabel で区別する
- active な NavItem には aria-current="page" が付く。色だけでなく支援技術にも現在地が伝わる
- アイコンだけで項目を示さない。NavItem には必ずテキストを入れる
文言
- 項目名は移動先の名詞で 1〜2 語（「ダッシュボード」「請求」）
- グループ名は項目をまとめる分類にする（「管理」「設定」）