Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Navbar Component

CSS-only Tailwind CSS navbar with brand, nav links, and action slots. Sticky and transparent variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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
navbarOpieraćKontener poziomego paska nawigacji
navbar-listModyfikatorPozioma lista łączy nawigacyjnych
navbar-startModyfikatorLewe miejsce na logo lub pierwszą grupę nawigacyjną
navbar-centerModyfikatorŚrodkowe miejsce na główną nawigację
navbar-endModyfikatorPrawe miejsce na akcje i sterowanie
navbar-topModyfikatorUmieszcza pasek nawigacyjny na górze rzutni
navbar-middleModyfikatorPionowo wyśrodkowany w obrębie elementu nadrzędnego
navbar-bottomModyfikatorUmieszcza pasek nawigacyjny na dole rzutni

Pasek nawigacyjny

 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>

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

Poziomo wyrównaj do środka

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>

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

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>

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

Wyrównaj w pionie do środka

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>

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

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>