📋 PopoverMenu Component Demo

A customizable menu bar with nested submenus

Features

Example 1: Basic Menu Bar

A simple menu bar with File, Edit, and View menus. Click on menu items to see them in action.

Output Console:
Click a menu item to see output...

Example 2: Nested Submenus

Demonstrates multi-level nested submenus with hover interactions. Hover over items with arrows to open submenus.

Output Console:
Interact with the menu...

Example 3: Menu with Separators

Shows how to use separators to organize menu items into logical groups.

Output Console:
Select a menu item...

Example 4: Disabled Menu Items

Demonstrates disabled menu items that cannot be clicked or interacted with.

Output Console:
Try clicking disabled items...

Example 5: Application Menu

A complete application menu bar example with typical menu structure including keyboard shortcuts in labels.

Output Console:
Click menu items to see actions...

Example 6: Dynamic Menu Updates

Demonstrates adding and removing menu items dynamically.

Output Console:
Use buttons to modify the menu...

Example 7: Context Menu Style

A single-menu example that works like a context menu with multiple options.

Output Console:
Select an action...

Usage Example

// Import the PopoverMenu component
import { PopoverMenuElement } from '@liwe3/webcomponents';

// Get the menu element
const menu = document.querySelector('liwe3-popover-menu');

// Set menu items
menu.setItems([
  {
    label: 'File',
    items: [
      {
        label: 'New',
        onclick: () => console.log('New file')
      },
      {
        label: 'Open',
        onclick: () => console.log('Open file')
      },
      { label: '---sep' }, // Separator
      {
        label: 'Save',
        onclick: () => console.log('Save file')
      },
      {
        label: 'Export',
        items: [
          {
            label: 'PDF',
            onclick: () => console.log('Export as PDF')
          },
          {
            label: 'HTML',
            onclick: () => console.log('Export as HTML')
          }
        ]
      }
    ]
  },
  {
    label: 'Edit',
    items: [
      {
        label: 'Cut',
        onclick: () => console.log('Cut')
      },
      {
        label: 'Copy',
        onclick: () => console.log('Copy')
      },
      {
        label: 'Paste',
        onclick: () => console.log('Paste'),
        enabled: false // Disabled item
      }
    ]
  }
]);

CSS Customization

/* Available CSS variables for customization */
liwe3-popover-menu {
  --popover-menu-bar-background: #fff;
  --popover-menu-bar-border: #ddd;
  --popover-menu-bar-radius: 6px;
  --popover-menu-bar-padding: 4px;
  --popover-menu-bar-shadow: 0 1px 3px rgba(0,0,0,0.1);

  --popover-menu-trigger-color: #333;
  --popover-menu-trigger-hover-bg: #f0f0f0;
  --popover-menu-trigger-active-bg: #e3f2fd;
  --popover-menu-trigger-active-color: #1976d2;

  --popover-menu-background: white;
  --popover-menu-border: #ccc;
  --popover-menu-radius: 6px;
  --popover-menu-shadow: 0 4px 12px rgba(0,0,0,0.15);

  --popover-menu-item-color: #333;
  --popover-menu-item-hover-bg: #f5f5f5;
  --popover-menu-item-disabled-color: #999;
  --popover-menu-submenu-arrow-color: #666;
  --popover-menu-separator-color: #e0e0e0;
}