ブランド、ナビゲーション リンク、アクション スロットを備えた CSS のみの Tailwind CSS ナビゲーションバー。粘着性と透明のバリエーション。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
Navbar コンポーネントには、サイト構造とユーザー ナビゲーションのための水平方向のナビゲーション リストが表示されます。セマンティック HTML のナビゲーション要素とリスト要素を使用して構築された Frutjam ナビゲーションバー システムは、複数のレイアウト、応答性の高い動作、およびネストされたメニューの統合をサポートします。アクセスしやすく、キーボードで操作できるナビゲーションバーは、メインサイトのナビゲーション、パンくずリスト、およびタブのインターフェイスに最適です。
CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
| クラス | タイプ | 説明 |
|---|---|---|
| navbar | ベース | 水平ナビゲーションバーコンテナ |
| navbar-list | 修飾子 | ナビゲーション リンクの水平リスト |
| navbar-start | 修飾子 | ロゴまたは最初のナビゲーション グループ用の左スロット |
| navbar-center | 修飾子 | メインナビゲーション用のセンタースロット |
| navbar-end | 修飾子 | アクションとコントロール用の適切なスロット |
| navbar-top | 修飾子 | ナビゲーションバーをビューポートの上部に配置します |
| navbar-middle | 修飾子 | 親内で垂直方向の中央揃え |
| navbar-bottom | 修飾子 | ナビゲーションバーをビューポートの下部に配置します |
ナビバー
1 2 3 4 5 6 7 8 9 10 11 12 13 | <nav class="navbar"> <ul class="navbar-list gap-x-6"> <li> <a class="link link-xs link-hover">Navbar list 1</a> </li> <li> <a class="link link-xs link-hover">Navbar list 2</a> </li> <li> <a class="link link-xs link-hover">Navbar list 3</a> </li> </ul> </nav> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <nav className="navbar"> <ul className="navbar-list gap-x-6"> <li> <a className="link link-xs link-hover">Navbar list 1</a> </li> <li> <a className="link link-xs link-hover">Navbar list 2</a> </li> <li> <a className="link link-xs link-hover">Navbar list 3</a> </li> </ul> </nav> |
ナビゲーションバーの配置
デフォルトでは、navbar コンポーネントは先頭 (LTR の左側) に配置されます。水平方向の配置には navbar-start、navbar-center、または navbar-end を使用し、垂直方向の配置には navbar-top、navbar-middle、または navbar-bottom を使用します。配置は RTL に適しています。
ナビゲーションバーのリストを X 軸に沿って整列させるには水平配置クラスを使用し、ナビゲーションバーにカスタムの高さがある場合は垂直配置クラスを使用します。
水平方向の配置
navbar-list を X 軸に沿って配置する方法を制御します。これらは RTL に適しています (左/右ではなく開始/終了)。
横方向左揃え（開始）
1 2 3 4 5 6 7 8 9 10 11 12 13 | <nav class="navbar navbar-start"> <ul class="navbar-list gap-x-6"> <li> <a class="link link-xs link-hover">Navbar list 1</a> </li> <li> <a class="link link-xs link-hover">Navbar list 2</a> </li> <li> <a class="link link-xs link-hover">Navbar list 3</a> </li> </ul> </nav> |
横方向中央揃え
1 2 3 4 5 6 7 8 9 10 11 12 13 | <nav class="navbar navbar-center"> <ul class="navbar-list gap-x-6"> <li> <a class="link link-xs link-hover">Navbar list 1</a> </li> <li> <a class="link link-xs link-hover">Navbar list 2</a> </li> <li> <a class="link link-xs link-hover">Navbar list 3</a> </li> </ul> </nav> |
横方向右揃え（端）
1 2 3 4 5 6 7 8 9 10 11 12 13 | <nav class="navbar navbar-end"> <ul class="navbar-list gap-x-6"> <li> <a class="link link-xs link-hover">Navbar list 1</a> </li> <li> <a class="link link-xs link-hover">Navbar list 2</a> </li> <li> <a class="link link-xs link-hover">Navbar list 3</a> </li> </ul> </nav> |
垂直方向の配置
Y 軸に沿った配置を制御します。これは、ナビゲーションバーにカスタムの高さがある場合に特に便利です。
上に垂直に揃えます（開始）
1 2 3 4 5 6 7 8 9 10 11 12 13 | <nav class="navbar navbar-top h-56"> <ul class="navbar-list"> <li> <a class="link link-xs link-hover">Navbar list 1</a> </li> <li> <a class="link link-xs link-hover">Navbar list 2</a> </li> <li> <a class="link link-xs link-hover">Navbar list 3</a> </li> </ul> </nav> |
垂直方向を中央に揃える
1 2 3 4 5 6 7 8 9 10 11 12 13 | <nav class="navbar navbar-middle h-56"> <ul class="navbar-list"> <li> <a class="link link-xs link-hover">Navbar list 1</a> </li> <li> <a class="link link-xs link-hover">Navbar list 2</a> </li> <li> <a class="link link-xs link-hover">Navbar list 3</a> </li> </ul> </nav> |
垂直方向を下（端）に揃えます
1 2 3 4 5 6 7 8 9 10 11 12 13 | <nav class="navbar navbar-bottom h-56"> <ul class="navbar-list"> <li> <a class="link link-xs link-hover">Navbar list 1</a> </li> <li> <a class="link link-xs link-hover">Navbar list 2</a> </li> <li> <a class="link link-xs link-hover">Navbar list 3</a> </li> </ul> </nav> |
Claude コード、Cursor、または別の AI エディターを使用していますか?
Cherry MCP は、AI エディタに正確な ナビバー クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。