---
title: "Navbar"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Navbar with sticky, responsive, and dropdown-ready layouts. Semantic HTML with mobile support for accessible, theme-aware site navigation."
url: https://frutjam.com/pl/components/navbar
---

# Navbar Component

Komponenty paska nawigacyjnego wyświetlają poziome listy nawigacyjne dotyczące struktury witryny i nawigacji użytkownika. Zbudowany z semantycznych elementów nawigacji i list HTML, system pasków nawigacyjnych Frutjam obsługuje wiele układów, responsywne zachowanie i integrację zagnieżdżonych menu. Dostępne i obsługiwane za pomocą klawiatury paski nawigacyjne idealnie nadają się do nawigacji w witrynie głównej, menu nawigacyjnego i interfejsów kart.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa         | Typ         | Opis                                                |
| ------------- | ----------- | --------------------------------------------------- |
| navbar        | Opierać     | Kontener poziomego paska nawigacji                  |
| navbar-list   | Modyfikator | Pozioma lista łączy nawigacyjnych                   |
| navbar-start  | Modyfikator | Lewe miejsce na logo lub pierwszą grupę nawigacyjną |
| navbar-center | Modyfikator | Środkowe miejsce na główną nawigację                |
| navbar-end    | Modyfikator | Prawe miejsce na akcje i sterowanie                 |
| navbar-top    | Modyfikator | Umieszcza pasek nawigacyjny na górze rzutni         |
| navbar-middle | Modyfikator | Pionowo wyśrodkowany w obrębie elementu nadrzędnego |
| navbar-bottom | Modyfikator | Umieszcza pasek nawigacyjny na dole rzutni          |

## Pasek nawigacyjny

## Rozmieszczenie paska nawigacyjnego

Komponent paska nawigacyjnego jest domyślnie umieszczony na początku (po lewej stronie w LTR). Użyj `navbar-start`, `navbar-center` lub `navbar-end` do wyrównania w poziomie oraz `navbar-top`, `navbar-middle` lub `navbar-bottom` do wyrównania w pionie. Umieszczenie jest przyjazne dla RTL.

Użyj klas umieszczania poziomego, aby wyrównywać listę pasków nawigacyjnych wzdłuż osi X, oraz klas umieszczania pionowego, gdy pasek nawigacyjny ma niestandardową wysokość.

### Umiejscowienia poziome

Kontroluj położenie `navbar-list` wzdłuż osi X. Są one przyjazne dla RTL (Start/Koniec zamiast Lewo/Prawo).

#### Wyrównaj w poziomie do lewej (początek)

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

#### Poziomo wyrównaj do środka

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

#### Wyrównaj w poziomie do prawej (końca)

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

### Pionowe rozmieszczenie

Kontroluj wyrównanie wzdłuż osi Y. Jest to szczególnie przydatne, gdy pasek nawigacyjny ma niestandardową wysokość.

#### Wyrównaj w pionie do góry (początek)

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

#### Wyrównaj w pionie do środka

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

#### Wyrównaj w pionie do dołu (końca)

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