Ana içeriğe atla
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.

Gezinti çubuğu bileşenleri, site yapısı ve kullanıcı gezinmesi için yatay gezinme listelerini görüntüler. Semantik HTML gezinme ve liste öğeleriyle oluşturulan Frutjam gezinme çubuğu sistemi, birden fazla düzeni, duyarlı davranışı ve iç içe menü entegrasyonunu destekler. Erişilebilir ve klavyeyle gezinilebilen gezinme çubukları, ana sitede gezinme, içerik kırıntıları ve sekme arayüzleri için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf Tip Tanım
navbarTemelYatay gezinme çubuğu kapsayıcısı
navbar-listDeğiştiriciGezinme bağlantılarının yatay listesi
navbar-startDeğiştiriciLogo veya ilk gezinme grubu için sol yuva
navbar-centerDeğiştiriciAna navigasyon için orta yuva
navbar-endDeğiştiriciEylemler ve kontroller için doğru yuva
navbar-topDeğiştiriciGezinme çubuğunu görünümün üst kısmına konumlandırır
navbar-middleDeğiştiriciBir ebeveynin içinde dikey olarak ortalanmış
navbar-bottomDeğiştiriciGezinti çubuğunu görünümün alt kısmına konumlandırır

Gezinme çubuğu

 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>

Gezinme Çubuğu Yerleşimleri

Gezinme çubuğu bileşeni varsayılan olarak başlangıçta konumlandırılmıştır (LTR'de solda). Yatay hizalama için navbar-start, navbar-center veya navbar-end'i ve dikey hizalama için navbar-top, navbar-middle veya navbar-bottom'u kullanın. Yerleştirme RTL dostudur.

Gezinme çubuğu listesini X ekseni boyunca hizalamak için yatay yerleştirme sınıflarını ve gezinme çubuğu özel bir yüksekliğe sahip olduğunda dikey yerleştirme sınıflarını kullanın.

Yatay Yerleşimler

navbar-list'in X ekseni boyunca nasıl oturacağını kontrol edin. Bunlar RTL dostudur (Sol/Sağ yerine Başlangıç/Bitiş).

Yatay olarak sola hizalayın (başlat)

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>

Yatay olarak merkeze hizalayın

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>

Yatay olarak sağa hizala (son)

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>

Dikey Yerleşimler

Y ekseni boyunca hizalamayı kontrol edin. Bu, özellikle gezinme çubuğunun özel bir yüksekliği olduğunda kullanışlıdır.

Dikey olarak üste hizalayın (başlangıç)

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>

Dikey olarak merkeze hizalayın

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>

Alt tarafa (uç) dikey olarak hizalayın

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>