kaze風
Navbar
マーケティングサイト用ナビゲーションバー
プレビュー
使いどころ
使う場面
- LP やプロダクトサイトの最上部に置く、ロゴ + ページ内リンク + 主な操作の帯
- logo にロゴ、children に NavbarLinks を渡し、右側の actions に「ログイン」と主な CTA を置く
- 現在のページやセクションのリンクには active を付ける。aria-current="page" が出力される
- ヒーロー画像に重ねるときは transparent にする
使わない場面
- 業務アプリの画面上部。Topbar と Sidebar を使う
- リンクが 6 個を超える構成。主要なものだけ残し、残りは LPFooter に移す
- actions に主な操作を 2 つ以上並べること。主な操作は 1 つにし、もう 1 つは文字のリンクか outline にする
使い方
<Navbar logo={<Logo />} actions={<Button>はじめる</Button>}>
<NavbarLinks>
<NavbarLink href="/features" active>機能</NavbarLink>
<NavbarLink href="/pricing">料金</NavbarLink>
</NavbarLinks>
</Navbar>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
logo | ReactNode | なし | ロゴ要素 |
actions | ReactNode | なし | 右側のアクション要素 |
transparent | boolean | false | 透明背景にするかどうか |
NavbarLinks | サブコンポーネント | なし | ナビリンクのコンテナ |
NavbarLink | サブコンポーネント | なし | 個々のナビリンク（active prop 対応） |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | ロゴ、リンク、actions の順にフォーカスを移す |
| Enter | フォーカスしたリンクを開く（ボタンは Enter / Space で押す） |
アクセシビリティ
- <nav> のランドマークで出力される。ページに <nav> が複数ある（フッターなど）ときは aria-label="メイン" のように名前を付けて区別する
- リンクは <ul> の <li> に入り、項目数が読み上げられる
- Next.js の Link を使うときは asChild で包む。as も使えるが、両方指定したときは asChild が優先される
- ページ内アンカーに active を付ける場合も aria-current="page" になる。現在地として正しいか確認する
文言
- リンク名は 2 から 6 文字の名詞（「機能」「料金」「導入事例」）。動詞の文にしない
- ログインは「ログイン」、登録の導線は「無料で始める」のように動詞で書く