---
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/id/components/navbar
---

# Navbar Component

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                                              |
| ------------- | -------- | ------------------------------------------------------- |
| navbar        | Basis    | Wadah bilah navigasi horizontal                         |
| navbar-list   | Pengubah | Daftar tautan navigasi horizontal                       |
| navbar-start  | Pengubah | Slot kiri untuk logo atau grup navigasi pertama         |
| navbar-center | Pengubah | Slot tengah untuk navigasi utama                        |
| navbar-end    | Pengubah | Slot yang tepat untuk tindakan dan kontrol              |
| navbar-top    | Pengubah | Memposisikan bilah navigasi di bagian atas area pandang |
| navbar-middle | Pengubah | Berpusat secara vertikal di dalam induk                 |
| navbar-bottom | Pengubah | Memposisikan navbar di bagian bawah viewport            |

## bilah navigasi

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