MenuManager Demo

Dynamic menu rendering from API data with 2-level nested support

Example 1: Static Menu (HTML)

เมนูแบบ static ที่เขียน HTML โดยตรง ใช้ data-component="menu"

HTML Code:

<nav class="topmenu" data-component="menu">
              <ul>
              <li><a href="#dashboard" class="icon-dashboard"><span>Dashboard</span></a></li>
              <li>
              <button type="button" class="icon-grid"><span>Sales</span></button>
              <ul>
              <li><a href="#pipeline"><span>Pipeline</span></a></li>
              <li><a href="#deals"><span>Deals</span></a></li>
              </ul>
              </li>
              <li><a href="#customers"><i class="icon-users"></i><span>Customers</span></a></li>
              </ul>
              </nav>

Example 2: Dynamic Menu with JavaScript

ใช้ MenuManager.renderFromData() ในการ render เมนูจาก JavaScript

JavaScript Code:

// Menu data structure
              const menuData = [
              { title: 'Dashboard', url: '/', icon: 'icon-dashboard' },
              {
              title: 'Sales',
              icon: 'icon-grid',
              children: [
              { title: 'Pipeline', url: '/pipeline', icon: 'icon-chart' },
              { title: 'Deals', url: '/deals', icon: 'icon-wallet' }
              ]
              },
              { title: 'Customers', url: '/customers', icon: 'icon-users' },
              { title: 'Settings', url: '/settings', icon: 'icon-settings' }
              ];

              // Render menu from data
              MenuManager.renderFromData('#dynamicMenu', menuData);

Example 3: Dynamic Menu from API (Declarative)

ใช้ data-component="api" ร่วมกับ data-source="path.to.menus" เพื่อโหลดเมนูจาก API แบบ declarative

App: Loading...

HTML Code:

<div data-component="api" data-endpoint="api/menu.json" data-cache="true">
              <div class="header-info">
              <h3>App: <span data-text="data.app_name">Loading...</span></h3>
              </div>
              <!-- MenuManager auto-renders when API data arrives -->
              <nav class="sidemenu" data-component="menu" data-source="data.menus"></nav>
              </div>

API Response (api/menu.json):

{
              "app_name": "CRM System",
              "logo": "CR",
              "menus": [
              { "title": "Dashboard", "url": "/", "icon": "icon-dashboard" },
              {
              "title": "Sales",
              "icon": "icon-grid",
              "children": [
              { "title": "Pipeline", "url": "/pipeline", "icon": "icon-chart" },
              { "title": "Deals", "url": "/deals", "icon": "icon-wallet" }
              ]
              },
              { "title": "Customers", "url": "/customers", "icon": "icon-users" },
              { "title": "Settings", "url": "/settings", "icon": "icon-settings" }
              ]
              }

Menu Data Structure Reference

โครงสร้างข้อมูลเมนูที่รองรับโดย MenuManager.renderFromData()

Property Type Required Description
title string Yes ข้อความที่แสดงในเมนู
url string No* URL ปลายทาง (จำเป็นถ้าไม่มี children)
icon string No CSS class ของ icon
children array No รายการ submenu (รองรับสูงสุด 2 ระดับ)
badge string No Badge text เช่น "New", "5"
badgeClass string No CSS class สำหรับ badge
id string No ID ของ li element
class string No CSS class ของ li element

MenuManager API

MenuManager.renderFromData(container, data, options)

Render menu จาก array ของ menu items

Parameter Type Description
container Element | string Container element หรือ CSS selector
data Array Array ของ menu items
options Object Options เพิ่มเติม (เช่น arrowIcon)

MenuManager.setData(container, data, options)

Alias ของ renderFromData()

MenuManager.createMenu(element)

Initialize เมนูที่มี HTML อยู่แล้ว พร้อม accessibility และ event handlers

MenuManager.updateActiveMenu(path)

อัพเดท active state ตาม URL path ปัจจุบัน