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

Basic Menu
ℹ️
Menu Component Structure
A dropdown menu consists of:
Container: Wraps the trigger and content
<div class="pm7-menu" data-pm7-menu>
Trigger: Button that opens the menu
<button class="pm7-menu-trigger">
Content: Dropdown container
<div class="pm7-menu-content">
Items: Individual menu options
<button class="pm7-menu-item">

Menu Positions
ℹ️
Positioning Options
Menus can be positioned in 8 different ways:
Bottom positions:
data-position="bottom-start" (default) data-position="bottom-end"
Top positions:
data-position="top-start" data-position="top-end"
Side positions:
data-position="left-start/end" data-position="right-start/end"

Menu with Icons
ℹ️
Icon Usage in Menus
Icons enhance menu usability:
Trigger icon: Add icon to trigger button
<button class="pm7-menu-trigger"> <svg>...</svg> User Menu </button>
Item icons: Add icons to menu items
<button class="pm7-menu-item"> <svg>...</svg> Settings </button>
Icons should be 16x16px for consistency

Disabled Items
ℹ️
Disabled State
Menu items can be disabled:
Visual feedback: Reduced opacity
class="pm7-menu-item pm7-menu-item--disabled"
Interaction: Not clickable or focusable
Use case: Show unavailable actions with context (e.g., "No permission")

Icon Button Menu
ℹ️
Icon-only Trigger Pattern
Common pattern for compact menus:
Three dots menu: Common for "more options"
<button class="pm7-button pm7-button--ghost pm7-button--icon pm7-menu-trigger" aria-label="More options"> <svg>...</svg> </button>
Important: Always include aria-label for accessibility
Use cases: Table row actions, card menus, toolbars

Navigation Menu Example

Hamburger Menu

Account Menu

John Doe

john.doe@example.com

Filter & Sort Menu

Status
Type

Menu with Submenu
ℹ️
Submenu Pattern
Create nested menus for hierarchical navigation:
Structure: Wrapper + hover handlers
<div class="pm7-submenu-wrapper"> <button class="pm7-menu-item pm7-menu-item--has-submenu"> Theme </button> <div class="pm7-submenu"> <button class="pm7-menu-item">Light</button> <button class="pm7-menu-item">Dark</button> </div> </div>
Arrow indicator: Shows submenu availability
Radio buttons: Use pm7-menu-item--radio for single selection
Classes: .pm7-submenu-wrapper, .pm7-submenu, --has-submenu

Context Menu (Right-click)

Right-click anywhere in this area

Application Toolbar Menu

Gradient Border Menus

Menu with Gradient Borders

Recent Favorites
Settings

Different Border Thicknesses

Profile Settings
Logout

Complex Menu with Gradient

Account

Profile ⌘P Settings ⌘,

Team

Invite Members Team Settings
Logout

Installation

npm install @pm7/core

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>

CSS Classes

Class Description
Container Classes
.pm7-menu Menu container
.pm7-menu-bar Application-style menu bar container
Trigger Classes
.pm7-menu-trigger Button that opens the menu
Content Classes
.pm7-menu-content Dropdown container
.pm7-menu-content--open Open state of menu
.pm7-menu-content--start Explicit left alignment
.pm7-menu-content--end Right alignment
.pm7-menu-content--center Center alignment
.pm7-menu-content--top For vertical positioning
.pm7-menu-item Clickable menu item
.pm7-menu-item--checkbox Checkbox menu item
.pm7-menu-item--radio Radio menu item
.pm7-menu-item--switch Switch/toggle menu item
.pm7-menu-item--has-submenu Item with submenu indicator
.pm7-menu-item--destructive Destructive action (red text)
.pm7-menu-item--disabled Disabled state
.pm7-menu-item--clicking Click animation state
Structure Classes
.pm7-menu-item-icon Icon within menu item
.pm7-menu-item-check Checkmark icon for checkbox menu items
.pm7-menu-switch Switch element in switch menu items
.pm7-menu-icon Icon in trigger button
.pm7-menu-shortcut Keyboard shortcut hint
.pm7-menu-separator Horizontal divider
.pm7-menu-label Small section label
.pm7-menu-section-title Large section header
.pm7-submenu Submenu container
.pm7-menu-submenu-icon Submenu arrow indicator

Data Attributes

Attribute Description
data-pm7-menu Auto-initialize menu
data-position For menu positioning
data-state For open/closed state
data-submenu-open For submenu state
data-active For active/selected state
data-pm7-menu-initialized For tracking initialization
data-checked Set checkable item state
data-name Group radio items
data-value Custom value for menu item
aria-expanded For accessibility
aria-disabled For disabled items

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';

    import '/packages/core/src/scripts/index.js';
// 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);
});

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:

https://raw.githubusercontent.com/patrickmast/pm7-ui/main/packages/core/src/components/menu/README.md

🤖 AI-Optimized Documentation

This link contains complete Markdown documentation that is perfectly readable by AI assistants, developers, and other automated systems. Directly accessible on GitHub - including all essential PM7 Menu implementation guidance.

Perfect for ChatGPT, Claude, and other AI code assistants