Multi-Level Flyout Menu jQuery Plugin Demos

Features

• Unlimited nesting depth - Create menus with as many levels as needed
• RTL/LTR support - Automatic direction detection based on dir attribute
• Touch/Hover detection - Hover behavior on desktop, click on mobile/tablets
• Keyboard navigation - Full arrow key, Enter, and Escape key support
• ARIA attributes - Accessible for screen readers
• JSON or HTML mode - Initialize from data or existing markup
• Multiple widgets - Works with multiple menus on the same page
• Bootstrap 5 compatible - Uses Bootstrap dropdown classes
• Dark mode support - Full dark mode with Bootstrap theme integration

Usage Examples

JSON Mode

const data = [
  {
    label: 'Electronics',
    icon: 'bi bi-laptop',
    url: '#',
    children: [
      { label: 'Laptops', icon: 'bi bi-laptop', url: '#' },
      { label: 'Phones', icon: 'bi bi-phone', url: '#' }
    ]
  }
];

renderFlyoutFromJson('#menu-container', data);

HTML Mode

<div class="widget-body" id="menu-container">
  <ul class="widget-flyout-menu list-unstyled">
    <li class="dropdown-submenu">
      <a href="#" class="dropdown-toggle dropdown-item">
        <i class="bi bi-house"></i>Home
      </a>
      <ul class="dropdown-menu">
        <li><a href="#" class="dropdown-item">Dashboard</a></li>
      </ul>
    </li>
  </ul>
</div>

<script>
  initWidgetFlyout('#menu-container');
</script>

Keyboard Navigation

Dark Mode

The library includes full dark mode support that integrates seamlessly with Bootstrap 5 themes. Click the theme toggle button in the top-right corner to switch between light and dark modes.

Theme API

// Initialize theme on page load
FlyoutTheme.init();

// Set specific theme
FlyoutTheme.setTheme('dark');  // or 'light' or 'auto'

// Toggle theme
FlyoutTheme.toggle();

// Get current theme
const currentTheme = FlyoutTheme.getTheme();

// Watch for system theme changes
FlyoutTheme.watchSystemTheme();

The theme preference is automatically saved to localStorage and restored on page load. The library supports:

• Bootstrap 5 data-bs-theme attribute
• Legacy .dark-mode class for older implementations
• System preference detection with prefers-color-scheme
• Custom CSS variables for easy customization