Dokumentasi komponen Menu yang dapat digunakan dalam NexaUI framework.
Menu dasar dengan tampilan sederhana.
<ul class="nx-menu">
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
</ul>
<Menu
class="nx-menu"items='(
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
)'/>
Menu dengan orientasi horizontal dan auto-width.
<ul class="nx-menu horizontal">
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
<Menu
class="nx-menu horizontal"items='(
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
)'/>
Menu dengan orientasi vertikal.
<ul class="nx-menu vertical">
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
</ul>
<Menu
class="nx-menu vertical"items='(
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
)'/>
Menu yang responsif untuk tampilan mobile.
<ul class="nx-menu responsive">
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
<Menu
class="nx-menu responsive"items='(
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
)'/>
Menu dengan opsi dropdown.
<ul class="nx-menu">
<li><a href="#">Beranda</a></li>
<li class="dropdown">
<a href="#">Produk ▾</a>
<div class="dropdown-content">
<a href="#">Kategori 1</a>
<a href="#">Kategori 2</a>
<a href="#">Kategori 3</a>
</div>
</li>
<li><a href="#">Kontak</a></li>
</ul>
<Menu
class="nx-menu"items='(
<li><a href="#">Beranda</a></li>
<li class="dropdown">
<a href="#">Produk ▾</a>
<div class="dropdown-content">
<a href="#">Kategori 1</a>
<a href="#">Kategori 2</a>
<a href="#">Kategori 3</a>
</div>
</li>
<li><a href="#">Kontak</a></li>
)'/>
Menu dengan submenu bertingkat.
<ul class="nx-menu">
<li><a href="#">
<span class="material-icons">home</span>
Beranda
</a></li>
<li class="has-submenu">
<a href="#">
<span class="material-icons">inventory_2</span>
Produk
<span class="material-icons submenu-icon">expand_more</span>
</a>
<ul class="submenu">
<li><a href="#">Kategori 1</a></li>
<li><a href="#">Kategori 2</a></li>
<li class="has-submenu">
<a href="#">
Sub Kategori
<span class="material-icons submenu-icon">chevron_right</span>
</a>
<ul class="submenu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">
<span class="material-icons">person</span>
Profil
</a></li>
</ul>
<Menu
class="nx-menu"items='(
<li><a href="#">
<span class="material-icons">home</span>
Beranda
</a></li>
<li class="has-submenu">
<a href="#">
<span class="material-icons">inventory_2</span>
Produk
<span class="material-icons submenu-icon">expand_more</span>
</a>
<ul class="submenu">
<li><a href="#">Kategori 1</a></li>
<li><a href="#">Kategori 2</a></li>
<li class="has-submenu">
<a href="#">
Sub Kategori
<span class="material-icons submenu-icon">chevron_right</span>
</a>
<ul class="submenu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">
<span class="material-icons">person</span>
Profil
</a></li>
)'/>
Menu dengan panel dropdown yang lebar dan konten yang kompleks.
Diskon Spesial!
<ul class="nx-menu">
<li><a href="#">Beranda</a></li>
<li class="mega-menu">
<a href="#">
Produk
<span class="material-icons">expand_more</span>
</a>
<div class="mega-content">
<div class="mega-grid">
<div class="mega-column">
<h5>Kategori 1</h5>
<ul>
<li><a href="#">Produk 1.1</a></li>
<li><a href="#">Produk 1.2</a></li>
<li><a href="#">Produk 1.3</a></li>
</ul>
</div>
<div class="mega-column">
<h5>Kategori 2</h5>
<ul>
<li><a href="#">Produk 2.1</a></li>
<li><a href="#">Produk 2.2</a></li>
<li><a href="#">Produk 2.3</a></li>
</ul>
</div>
<div class="mega-column">
<h5>Promo</h5>
<div class="mega-promo">
<img src="https://via.placeholder.com/200x100" alt="Promo">
<p>Diskon Spesial!</p>
</div>
</div>
</div>
</div>
</li>
<li><a href="#">Kontak</a></li>
</ul>
<Menu
class="nx-menu"items='(
<li><a href="#">Beranda</a></li>
<li class="mega-menu">
<a href="#">
Produk
<span class="material-icons">expand_more</span>
</a>
<div class="mega-content">
<div class="mega-grid">
<div class="mega-column">
<h5>Kategori 1</h5>
<ul>
<li><a href="#">Produk 1.1</a></li>
<li><a href="#">Produk 1.2</a></li>
<li><a href="#">Produk 1.3</a></li>
</ul>
</div>
<div class="mega-column">
<h5>Kategori 2</h5>
<ul>
<li><a href="#">Produk 2.1</a></li>
<li><a href="#">Produk 2.2</a></li>
<li><a href="#">Produk 2.3</a></li>
</ul>
</div>
<div class="mega-column">
<h5>Promo</h5>
<div class="mega-promo">
<img src="https://via.placeholder.com/200x100" alt="Promo">
<p>Diskon Spesial!</p>
</div>
</div>
</div>
</div>
</li>
<li><a href="#">Kontak</a></li>
)'/>
Menu yang dilengkapi dengan Material Icons.
<ul class="nx-menu">
<li>
<a href="#">
<span class="material-icons">home</span>
Beranda
</a>
</li>
<li>
<a href="#">
<span class="material-icons">inventory_2</span>
Produk
</a>
</li>
<li>
<a href="#">
<span class="material-icons">person</span>
Profil
</a>
</li>
<li>
<a href="#">
<span class="material-icons">mail</span>
Kontak
</a>
</li>
</ul>
<Menu
class="nx-menu"items='(
<li>
<a href="#">
<span class="material-icons">home</span>
Beranda
</a>
</li>
<li>
<a href="#">
<span class="material-icons">inventory_2</span>
Produk
</a>
</li>
<li>
<a href="#">
<span class="material-icons">person</span>
Profil
</a>
</li>
<li>
<a href="#">
<span class="material-icons">mail</span>
Kontak
</a>
</li>
)'/>
Menu yang dilengkapi dengan badge notifikasi.
<ul class="nx-menu">
<li><a href="#">Beranda</a></li>
<li>
<a href="#">
Pesan
<span class="badge">3</span>
</a>
</li>
<li>
<a href="#">
Notifikasi
<span class="badge">5</span>
</a>
</li>
</ul>
<Menu
class="nx-menu" items='(
<li><a href="#">Beranda</a></li>
<li>
<a href="#">
Pesan
<span class="badge">3</span>
</a>
</li>
<li>
<a href="#">
Notifikasi
<span class="badge">5</span>
</a>
</li>
)'/>
Menu yang dilengkapi dengan fitur pencarian.
<ul class="nx-menu">
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li class="search-box">
<input type="text" class="search-input" placeholder="Cari...">
<span class="material-icons search-icon">search</span>
</li>
<li><a href="#">Kontak</a></li>
</ul>
<Menu
class="nx-menu" items='(
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li class="search-box">
<input type="text" class="search-input"placeholder="Cari...">
<span class="material-icons search-icon">search</span>
</li>
<li><a href="#">Kontak</a></li>
)'/>
Menu dengan opsi filter kategori.
<ul class="nx-menu">
<li class="filter-group">
<span class="filter-item active">Semua</span>
<span class="filter-item">Terbaru</span>
<span class="filter-item">Populer</span>
<span class="filter-item">Trending</span>
</li>
</ul>
<Menu
class="nx-menu"items='(
<li class="filter-group">
<span class="filter-item active">Semua</span>
<span class="filter-item">Terbaru</span>
<span class="filter-item">Populer</span>
<span class="filter-item">Trending</span>
</li>
)'/>
Menu dengan efek animasi hover.
<ul class="nx-menu animated">
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Kontak</a></li>
</ul>
<Menu
class="nx-menu animated"items='(
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Kontak</a></li>
)'/>
Menu dengan variasi tema gelap.
<ul class="nx-menu theme-dark">
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Kontak</a></li>
</ul>
<Menu
class="nx-menu theme-dark"items='(
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Kontak</a></li>
)'/>
Menu yang dilengkapi dengan gambar thumbnail.
<ul class="nx-menu">
<li>
<a href="#">
<img src="https://via.placeholder.com/30" class="menu-image" alt="Profile">
Profil Saya
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30" class="menu-image" alt="Settings">
Pengaturan
</a>
</li>
</ul>
<Menu
class="nx-menu"items='(
<li>
<a href="#">
<img src="https://via.placeholder.com/30" class="menu-image"alt="Profile">
Profil Saya
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30" class="menu-image"alt="Settings">
Pengaturan
</a>
</li>
)'/>