Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Navbar-Komponente

Zuletzt aktualisiert:

Nur CSS-CSS-Navigationsleiste von Tailwind mit Marke, Navigationslinks und Aktionsslots. Klebrige und transparente Varianten. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Navbar-Komponenten zeigen horizontale Navigationslisten für die Site-Struktur und die Benutzernavigation an. Das Frutjam-Navigationsleistensystem basiert auf semantischen HTML-Navigations- und Listenelementen und unterstützt mehrere Layouts, reaktionsfähiges Verhalten und die Integration verschachtelter Menüs. Zugängliche und per Tastatur navigierbare Navigationsleisten eignen sich ideal für die Navigation auf der Hauptseite, Breadcrumbs und Tab-Oberflächen.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
navbarBaseHorizontaler Navigationsleistencontainer
navbar-listModifikatorHorizontale Liste von Navigationslinks
navbar-startModifikatorLinker Steckplatz für Logo oder erste Navigationsgruppe
navbar-centerModifikatorMittlerer Schlitz für die Hauptnavigation
navbar-endModifikatorRechter Steckplatz für Aktionen und Steuerung
navbar-topModifikatorPositioniert die Navigationsleiste oben im Ansichtsfenster
navbar-middleModifikatorVertikal zentriert innerhalb eines übergeordneten Elements
navbar-bottomModifikatorPositioniert die Navigationsleiste am unteren Rand des Ansichtsfensters

Navigationsleiste

 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-Platzierungen

Die Navigationsleistenkomponente ist standardmäßig am Anfang positioniert (links in LTR). Verwenden Sie navbar-start, navbar-center oder navbar-end für die horizontale Ausrichtung und navbar-top, navbar-middle oder navbar-bottom für die vertikale Ausrichtung. Die Platzierung ist RTL-freundlich.

Verwenden Sie horizontale Platzierungsklassen, um die Navigationsleistenliste entlang der X-Achse auszurichten, und vertikale Platzierungsklassen, wenn die Navigationsleiste eine benutzerdefinierte Höhe hat.

Horizontale Platzierungen

Steuern Sie, wie die navbar-list entlang der X-Achse positioniert wird. Diese sind RTL-freundlich (Start/Ende statt Links/Rechts).

Horizontal nach links ausrichten (Start)

html 
 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>

Horizontal zur Mitte ausrichten

html 
 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>

Horizontal nach rechts ausrichten (Ende)

html 
 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>

Vertikale Platzierungen

Steuern Sie die Ausrichtung entlang der Y-Achse. Dies ist besonders nützlich, wenn die Navigationsleiste eine benutzerdefinierte Höhe hat.

Vertikal nach oben ausrichten (Start)

html 
 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>

Vertikal zur Mitte ausrichten

html 
 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>

Vertikal nach unten (Ende) ausrichten

html 
 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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Navigationsleiste-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP