Menu

The Menu component provides dropdown menus that can be triggered by buttons or other interactive elements. It's perfect for navigation menus, action lists, and contextual options.

When to use

• Navigation menus in headers or sidebars
• Action menus for operations (Edit, Delete, etc.)
• User account dropdowns
• Settings and preferences menus
• Context menus for right-click actions

Key features

• Click or hover trigger - Flexible activation modes
• Multiple positions - 8 positioning options
• Keyboard navigation - Full arrow key support
• Auto-close - Closes on outside click or escape
• Separators - Group related menu items
• Icons - Support for icons in menu items
• Accessible - ARIA attributes and focus management

Anatomy

A menu consists of:

• Trigger - Button or element that opens the menu
• Content - Dropdown container with menu items
• Items - Individual clickable options
• Separators - Visual dividers between groups
• Icons - Optional visual indicators

Installation

npm install @pm7/core

CSS Classes

Data Attributes

Basic Usage

<div class="pm7-menu" data-pm7-menu>
  <button class="pm7-button pm7-menu-trigger">
    Menu
  </button>
  <div class="pm7-menu-content">
    <button class="pm7-menu-item">Item 1</button>
    <button class="pm7-menu-item">Item 2</button>
    <button class="pm7-menu-item">Item 3</button>
  </div>
</div>

Application Menu Bar

For desktop application-style menus, use the pm7-menu-bar container:

<div class="pm7-menu-bar">
  <div class="pm7-menu" data-pm7-menu>
    <button class="pm7-menu-trigger">File</button>
    <div class="pm7-menu-content">...</div>
  </div>
  <div class="pm7-menu" data-pm7-menu>
    <button class="pm7-menu-trigger">Edit</button>
    <div class="pm7-menu-content">...</div>
  </div>
</div>

Features of menu bars:

• When one menu is open, hovering over other menu triggers will automatically open them
• Provides a native desktop application experience
• Click or hover to open menus

Menu Features

The PM7 Menu component includes:

• Auto-initialization: Menus with data-pm7-menu are automatically initialized
• Position adjustment: Automatically adjusts to stay within viewport
• Keyboard navigation: Full keyboard support with arrow keys, Home/End, and Escape
• Checkable items: Support for checkbox, radio, and switch menu items
• Menu bar behavior: Hover-to-open when another menu is already open
• Submenu support: Nested menus with keyboard navigation
• Focus management: Proper focus trap and restoration

JavaScript API

import { PM7Menu } from '@pm7/core';

// Manual initialization
const menuElement = document.querySelector('.pm7-menu');
const menu = new PM7Menu(menuElement);

// Open/close programmatically
menu.open();
menu.close();
menu.toggle();

// Adjust position manually
menu.adjustPosition();

// Listen for selection
menuElement.addEventListener('pm7-menu-select', (e) => {
  console.log('Selected item:', e.detail.item);
  console.log('Menu instance:', e.detail.menu);
});

React Usage

import { Menu } from '@pm7/react';

function MyComponent() {
  const menuItems = [
    { id: '1', label: 'Edit', icon: <EditIcon /> },
    { id: '2', label: 'Duplicate', icon: <CopyIcon /> },
    { id: 'sep', type: 'separator' },
    { id: '3', label: 'Delete', icon: <TrashIcon />, variant: 'destructive' }
  ];

  return (
    <Menu
      trigger={<Button variant="outline">Options</Button>}
      items={menuItems}
      align="end"
      onSelect={(item) => handleMenuSelect(item)}
    />
  );
}

Keyboard Navigation

• Tab - Move focus to menu trigger
• Enter or Space - Open menu when trigger focused
• ↓ - Move to next item
• ↑ - Move to previous item
• → - Open submenu (when applicable)
• ← - Close submenu
• Home - Jump to first item
• End - Jump to last item
• Escape - Close menu
• Enter or Space - Select focused item

Accessibility

The Menu component includes comprehensive accessibility features:

• Full keyboard navigation with intuitive controls
• Focus management with trap and restoration
• ARIA attributes for screen reader support
• Skip disabled items in keyboard navigation
• Click outside to close
• Hover delay for better submenu UX
• RTL support for right-to-left languages

Copy this link that can be used as documentation for working with this component: