Frontend

Perkenalan Flex Layout Form Modal

Animate Accordion Alerts Badges Breadcrumb Button Button group Card Carousel Collapse Dropdown Navbar Offcanvas Popovers Progress Scrollspy Spinners Toasts Tooltips Media Object Menu Footer Sticky Scroll Table List Group Images Avatar Video Search Lightbox Sortable Thumbnav Feedback Stats Tabs Vector Icons

Ngorei NexaUI

Navbar

Dokumentasi komponen Navbar yang dapat digunakan dalam NexaUI framework.

Navbar Dasar

Navbar dasar adalah komponen navigasi paling sederhana yang terdiri dari brand/logo dan menu navigasi utama. Cocok digunakan untuk website sederhana yang hanya membutuhkan navigasi standar.

Demo:

NexaUI

Beranda
Produk
Layanan

Components

<nav class="nx-navbar">
  <a href="#" class="nx-nav-brand">NexaUI</a>
  <ul class="nx-nav-menu">
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Tentang Kami</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Kontak</a></li>
  </ul>
</nav>

<Navbar 
  brand='NexaUI'
  class="nx-navbar"
  content='(
      Beranda
      Produk
      Layanan
  )'
  />

Navbar dengan Pencarian

Navbar ini dilengkapi dengan fitur kotak pencarian yang memungkinkan pengguna mencari konten dengan cepat. Dilengkapi juga dengan shortcut keyboard (CTRL + K) untuk akses cepat ke pencarian.

Demo:

NexaUI

Beranda
Produk

CTRL K

NexaUI

Beranda
Produk

CTRL

Components

<nav class="nx-navbar">
  <a href="#" class="nx-nav-brand">NexaUI</a>
  <ul class="nx-nav-menu">
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
  </ul>
  <div class="nx-nav-search">
    <div class="nx-search-container">
      <input type="search" placeholder="Search" class="nx-search-input">
      <span class="nx-search-shortcut">CTRL K</span>
    </div>
  </div>
</nav>

<Navbar 
  brand='NexaUI'
  class="nx-navbar"
  search='true'
  content='(
      <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
      <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
  )'
/>

Navbar Responsif

Versi navbar yang dapat menyesuaikan tampilan pada perangkat mobile. Dilengkapi dengan tombol toggle menu (hamburger menu) yang akan muncul pada layar kecil untuk mengakses menu navigasi.

Demo:

NexaUI

Beranda
Produk
Layanan

CTRL K

Components

<nav class="nx-navbar">
  <a href="#" class="nx-nav-brand">NexaUI</a>
  <button class="nx-nav-toggle">☰</button>
  <ul class="nx-nav-menu">
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
  </ul>
  <div class="nx-nav-search">
    <div class="nx-search-container">
      <input type="search" placeholder="Search" class="nx-search-input">
      <span class="nx-search-shortcut">CTRL K</span>
    </div>
  </div>
</nav>

<Navbar 
  brand='NexaUI'
  class="nx-navbar"
  search='true'
  content='(
      <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
      <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
  )'
/>

Navbar dengan Dropdown

Navbar yang memiliki menu dropdown untuk menampung sub-menu atau kategori. Sangat berguna untuk website dengan struktur navigasi yang kompleks dan bertingkat.

Demo:

NexaUI

Beranda
Produk
Kategori 1 Kategori 2 Kategori 3
Layanan

Components

<nav class="nx-navbar">
  <a href="#" class="nx-nav-brand">NexaUI</a>
  <ul class="nx-nav-menu">
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item nx-nav-dropdown">
      <a href="#" class="nx-nav-link">Produk</a>
      <div class="nx-nav-dropdown-menu">
        <a href="#" class="nx-nav-dropdown-item">Kategori 1</a>
        <a href="#" class="nx-nav-dropdown-item">Kategori 2</a>
        <a href="#" class="nx-nav-dropdown-item">Kategori 3</a>
      </div>
    </li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
  </ul>
</nav>

<Navbar 
  brand='NexaUI'
  class="nx-navbar"
  content='(
      <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
      <li class="nx-nav-item nx-nav-dropdown">
        <a href="#" class="nx-nav-link">Produk</a>
        <div class="nx-nav-dropdown-menu">
          <a href="#" class="nx-nav-dropdown-item">Kategori 1</a>
          <a href="#" class="nx-nav-dropdown-item">Kategori 2</a>
          <a href="#" class="nx-nav-dropdown-item">Kategori 3</a>
        </div>
      </li>
      <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
  )'
/>

Navbar dengan Button

Navbar yang dilengkapi dengan tombol aksi seperti "Daftar" atau "Login". Cocok untuk website yang memerlukan interaksi pengguna seperti aplikasi web atau platform online.

Demo:

NexaUI

Beranda
Produk
Layanan

Components

<nav class="nx-navbar">
  <a href="#" class="nx-nav-brand">NexaUI</a>
  <ul class="nx-nav-menu">
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
  </ul>
  <button class="nx-btn nx-btn-primary">Daftar</button>
</nav>

<Navbar 
  brand='NexaUI'
  class="nx-navbar"
  content='(
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-btn nx-btn-primary">Daftar</a></li>
  )'
/>

Navbar dengan Logo/Image

Navbar yang menampilkan logo perusahaan atau brand dalam bentuk gambar. Membantu meningkatkan identitas visual dan brand recognition website Anda.

Demo:

Beranda
Produk
Layanan

Components

<nav class="nx-navbar">
  <a href="#" class="nx-nav-brand">
    <img src="logo/icon.png" alt="Logo" class="nx-nav-logo">
  </a>
  <ul class="nx-nav-menu">
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
  </ul>
</nav>

<Navbar 
  logo="logo/icon.png"
  class="nx-navbar"
  content='(
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
  )'
/>

Navbar Dark Mode

Versi navbar dengan tema gelap yang memberikan tampilan kontras dan modern. Ideal untuk website dengan tema gelap atau yang menyediakan opsi pergantian tema.

Demo:

NexaUI

Beranda
Produk
Layanan

Components

<nav class="nx-navbar nx-navbar-dark">
  <a href="#" class="nx-nav-brand">NexaUI</a>
  <ul class="nx-nav-menu">
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
  </ul>
</nav>

<Navbar 
  brand='NexaUI'
  class="nx-navbar-dark"
  content='(
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
  )'
/>

Navbar dengan Notifikasi

Navbar yang dilengkapi dengan sistem notifikasi untuk memberitahu pengguna tentang aktivitas atau pembaruan terbaru. Cocok untuk aplikasi web yang membutuhkan interaksi real-time.

Demo:

NexaUI

Beranda
Produk
Layanan
5

Notifikasi
Hapus Semua

Pesan baru dari pengguna
2 menit yang lalu

Components

<nav class="nx-navbar">
  <a href="#" class="nx-nav-brand">NexaUI</a>
  <ul class="nx-nav-menu">
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
    <li class="nx-nav-item nx-nav-notification">
      <a href="#" class="nx-nav-link">
        <i class="nx-icon nx-icon-bell"></i>
        <span class="nx-badge">5</span>
      </a>
      <div class="nx-notification-menu">
        <div class="nx-notification-header">
          <h6>Notifikasi</h6>
          <a href="#" class="nx-notification-clear">Hapus Semua</a>
        </div>
        <div class="nx-notification-body">
          <a href="#" class="nx-notification-item">
            <div class="nx-notification-content">
              <p>Pesan baru dari pengguna</p>
              <small>2 menit yang lalu</small>
            </div>
          </a>
        </div>
      </div>
    </li>
  </ul>
</nav>

<Navbar 
  brand='NexaUI'
  class="nx-navbar"
  content='(
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
    <li class="nx-nav-item nx-nav-notification">
      <a href="#" class="nx-nav-link">
        <i class="nx-icon nx-icon-bell"></i>
        <span class="nx-badge">5</span>
      </a>
      <div class="nx-notification-menu">
        <div class="nx-notification-header">
          <h6>Notifikasi</h6>
          <a href="#" class="nx-notification-clear">Hapus Semua</a>
        </div>
        <div class="nx-notification-body">
          <a href="#" class="nx-notification-item">
            <div class="nx-notification-content">
              <p>Pesan baru dari pengguna</p>
              <small>2 menit yang lalu</small>
            </div>
          </a>
        </div>
      </div>
    </li>
  )'
/>

Navbar Menu Kiri

Variasi navbar dengan posisi menu di sebelah kiri brand/logo. Layout alternatif yang dapat memberikan tampilan unik pada website Anda.

Demo:

Beranda
Produk
Layanan

NexaUI

Components

<nav class="nx-navbar">
  <ul class="nx-nav-menu nx-nav-menu-left">
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
  </ul>
  <a href="#" class="nx-nav-brand">NexaUI</a>
</nav>

<Navbar 
  brand='NexaUI'
  class="nx-nav-menu nx-nav-menu-left"
  content='(
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
  )'
/>

Navbar Menu Tengah

Navbar dengan menu yang diposisikan di tengah, memberikan tampilan yang seimbang dan simetris. Cocok untuk website yang mengutamakan estetika dan keseimbangan desain.

Demo:

NexaUI

Beranda
Produk
Layanan

Components

<nav class="nx-navbar nx-navbar-menu-center">
  <a href="#" class="nx-nav-brand">NexaUI</a>
  <ul class="nx-nav-menu nx-nav-menu-center">
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
  </ul>
</nav>

<Navbar 
  brand='NexaUI'
  class="nx-nav-menu nx-nav-menu-center"
  content='(
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
  )'
/>

Navbar Menu Kanan

Navbar dengan menu yang diposisikan di kanan, merupakan layout standar yang umum digunakan. Memberikan alur navigasi yang natural untuk pengguna yang membaca dari kiri ke kanan.

Demo:

NexaUI

Beranda
Produk
Layanan

Components

<nav class="nx-navbar nx-navbar-menu-right">
  <a href="#" class="nx-nav-brand">NexaUI</a>
  <ul class="nx-nav-menu nx-nav-menu-right">
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
  </ul>
</nav>

<Navbar 
  brand='NexaUI'
  class="nx-nav-menu nx-nav-menu-right"
  content='(
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Beranda</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Produk</a></li>
    <li class="nx-nav-item"><a href="#" class="nx-nav-link">Layanan</a></li>
  )'
/>

Navbar Dasar
Pencarian
Responsif
Dropdown
Button
Logo/Image
Dark Mode
Notifikasi
Menu Kiri
Menu Tengah
Menu Kanan