 Ngorei Doc
            Ngorei Doc 
        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>
)'/>