Skip to main content
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.

Komponen Navbar menampilkan daftar navigasi horizontal untuk struktur situs dan navigasi pengguna. Dibangun dengan elemen navigasi dan daftar HTML semantik, sistem navbar Frutjam mendukung banyak tata letak, perilaku responsif, dan integrasi menu bersarang. Dapat diakses dan dinavigasi dengan keyboard, bilah navigasi ideal untuk navigasi situs utama, remah roti, dan antarmuka tab.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
navbarBasisWadah bilah navigasi horizontal
navbar-listPengubahDaftar tautan navigasi horizontal
navbar-startPengubahSlot kiri untuk logo atau grup navigasi pertama
navbar-centerPengubahSlot tengah untuk navigasi utama
navbar-endPengubahSlot yang tepat untuk tindakan dan kontrol
navbar-topPengubahMemposisikan bilah navigasi di bagian atas area pandang
navbar-middlePengubahBerpusat secara vertikal di dalam induk
navbar-bottomPengubahMemposisikan navbar di bagian bawah viewport

bilah navigasi

 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>

Penempatan Navbar

Komponen navbar secara default diposisikan di awal (kiri di LTR). Gunakan navbar-start, navbar-center, atau navbar-end untuk perataan horizontal, dan navbar-top, navbar-middle, atau navbar-bottom untuk perataan vertikal. Penempatannya ramah RTL.

Gunakan kelas penempatan horizontal untuk menyelaraskan daftar bilah navigasi di sepanjang sumbu X, dan kelas penempatan vertikal ketika bilah navigasi memiliki ketinggian khusus.

Penempatan Horisontal

Kontrol posisi navbar-list di sepanjang sumbu X. Ini ramah RTL (Awal/Akhir, bukan Kiri/Kanan).

Sejajarkan secara horizontal ke kiri (mulai)

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>

Sejajarkan secara horizontal ke tengah

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>

Sejajarkan secara horizontal ke kanan (akhir)

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>

Penempatan Vertikal

Kontrol perataan sepanjang sumbu Y. Ini sangat berguna ketika navbar memiliki ketinggian khusus.

Sejajarkan secara vertikal ke atas (mulai)

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>

Sejajarkan secara vertikal ke tengah

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>

Sejajarkan secara vertikal ke bawah (ujung)

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>