MenuManager Documentation

Introduction

MenuManager is a flexible, responsive menu system for Now.js applications. It provides support for top navigation, side navigation, nested submenus, and mobile-friendly navigation.

Installation

To use MenuManager, first include the required CSS and JavaScript files


<link rel="stylesheet" href="reset.css">
<script src="Now.js"></script>


document.addEventListener('DOMContentLoaded', async () => {
    await Now.init({
        enabled: true
    });
});

Basic Usage

Top Menu

Create a responsive top navigation menu


<div class="topmenu responsive-menu menu-left" data-component="menu">
  <ul>
    <li>
      <a href="../../" class="icon-home" target="_self" data-i18n>Home</a>
    </li>
    <li>
      <button class="icon-book" data-i18n>Documentation</button>
      <ul>
        <li>
          <a href="../docs/getting-started">Getting Started</a>
        </li>
        <li>
          <a href="/components">Components</a>
        </li>
        <li>
          <a href="../docs/api">API Reference</a>
        </li>
      </ul>
    </li>
    <li>
      <button class="icon-dev" data-i18n>Examples</button>
      <ul>
        <li>
          <a href="/examples" class="badge-error" data-badge="3">
            Basic Usage
          </a>
        </li>
        <li>
          <button>Advanced Features</button>
          <ul>
            <li>
              <a href="/examples">Basic Usage</a>
            </li>
            <li>
              <a href="/examples/dashboard">Dashboard</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Side Menu

Create a vertical side navigation menu


<nav class="sidemenu" data-component="menu">
  <ul>
    <li>
      <a href="#introduction" class="icon-info">Introduction</a>
    </li>
    <li>
      <a href="#installation" class="icon-download">Installation</a>
    </li>
    <li>
      <button class="icon-book">Basic Usage</button>
      <ul>
        <li>
          <a href="#top-menu">Top Menu</a>
        </li>
        <li>
          <a href="#side-menu">Side Menu</a>
        </li>
      </ul>
    </li>
    <li>
      <button class="icon-dev">Advanced Features</button>
      <ul>
        <li>
          <a href="#icons">Icons</a>
        </li>
        <li>
          <a href="#badges">Badges</a>
        </li>
        <li>
          <a href="#themes">Themes</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#api" class="icon-code">API Reference</a>
    </li>
  </ul>
</nav>

Advanced Features

Explore advanced features of MenuManager.

Icons

Add icons to menu items using icon classes


<a href="#" class="icon-dev">
    Examples
</a>

Badges

Add notification badges to menu items


<a href="#" class="icon-dev badge-success" data-badge="3">
    Examples
</a>

Class	Description
badge-info	Blue - suitable for counts or general notifications.
badge-error	Red - suitable for importance or errors.
badge-success	Green - suitable for status or new items.

Always set the data-badge attribute when using badge classes.
Badges will always display on the right side of the text.
Cannot be used with items that have submenus.
Badges support both numeric and text content.

Themes

MenuManager supports multiple themes through CSS variables

Variable	Default Value	Description
`--menu-width`	280px	Width of the menu in responsive/mobile mode
`--menu-animation`	0.3s	Duration of menu animations
`--menu-highlight-bg`	#0055B8	Background color of highlighted menu items
`--menu-highlight-text`	#FFFFFF	Text color of highlighted menu items
`--z-index-menu-backdrop`	1090	Z-index for menu backdrop/overlay
`--z-index-menu-mobile`	1091	Z-index for mobile menu
`--z-index-menu-submenu`	1092	Z-index for submenu items

API Reference

CSS Classes

Class	Description
`responsive-menu`	Main class for responsive navigation menu that adapts to screen size. Transforms into sliding side menu on narrow screens.
`topmenu`	Horizontal menu typically placed at the top of website, can have multiple levels of submenus.
`sidemenu`	Vertical menu displayed on website's side, suitable for extensive menu items.
`menu-toggle`	Button to show/hide menu in mobile mode, typically shown as hamburger icon (three lines).
`menu-right/menu-left`	Determines which direction the mobile menu slides out from (right/left).

JavaScript Methods

Method	Description
`init(options)`	Initialize MenuManager with configuration options
`createMenu(element)`	Create a new menu instance for the given element
`destroyMenu(menuId)`	Clean up and remove a menu instance
`openMenu(menu)`	Open a specific menu with proper focus management
`closeMenu(menu)`	Close a menu and restore focus

Events

Event	Description
`menu:opened`	Fired when menu is opened
`menu:closed`	Fired when menu is closed
`submenu:opened`	Fired when submenu is opened
`submenu:closed`	Fired when submenu is closed

Accessibility

MenuManager includes built-in accessibility features

ARIA attributes for menu states and roles
Keyboard navigation support
Focus management
Screen reader announcements
Mobile-friendly interactions

Keyboard Shortcuts

Key	Action
`Enter` / `Space`	Activate menu item or toggle submenu
`Escape`	Close menu or submenu
`↑` / `←`	Move to previous item
`↓` / `→`	Move to next item
`Home`	Move to first item
`End`	Move to last item