Menu Component

Pending Review

Pending Review from User Experience (UX)

Overview

The Menu component provides a comprehensive dropdown and context menu system for organizing actions and navigation options in a hierarchical, accessible interface. It enables users to access related functions through intuitive trigger interactions while maintaining proper focus management and positioning intelligence.

Core Capabilities

Dynamic Trigger System - Button-based dropdown activation with configurable trigger behaviors
Smart Positioning - Floating UI integration with automatic collision detection and viewport boundary awareness
Hierarchical Content Structure - Nested menu items with proper keyboard navigation and accessibility support
Interactive State Management - Open/close state handling with blur detection and click-outside functionality
Icon and Label Integration - Flexible content display with FontAwesome icon support and text labeling
Accessibility Compliance - Full keyboard navigation support with proper ARIA roles and focus management

When to use Menu:

Action Organization - Grouping related actions in dropdown interfaces for cleaner UI design
Context-Sensitive Operations - Providing relevant actions based on current selection or application state
Navigation Enhancement - Secondary navigation options that complement primary navigation structures
Space-Constrained Interfaces - Conserving screen real estate while maintaining full functionality access

When not to use Menu:

Primary Navigation - Use dedicated navigation components for main site navigation instead of dropdown menus
Simple Binary Choices - Consider toggle switches or radio buttons for straightforward option selection
Always-Visible Actions - Use regular buttons for frequently accessed or critical operations that should remain visible

Basic Implementation

React 18React 19+AngularPure JavaScript

import React from 'react';
import { PwcMenu, PwcListItem } from '@progress-i360/pwc-react';

function ActionsMenu() {
  return (
      <PwcMenu label="Actions">
        <PwcListItem label="Edit Item" />
        <PwcListItem label="Copy Item" />
        <PwcListItem label="Delete Item" />
      </PwcMenu>
  );
}

import '@progress-i360/progress-web-components/menu';
import '@progress-i360/progress-web-components/list-item';

function ContextMenu() {
  return (
      <pwc-menu label="Options">
        <pwc-list-item label="View Details"></pwc-list-item>
        <pwc-list-item label="Share"></pwc-list-item>
        <pwc-list-item label="Archive"></pwc-list-item>
      </pwc-menu>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@progress-i360/progress-web-components/menu';
import '@progress-i360/progress-web-components/list-item';

@Component({
  selector: 'menu-demo',
  template: `
    <div style="max-width: 400px; margin: 0 auto; padding: 20px;">
      <h3>Menu Demo</h3>
      <p>Interactive dropdown menu with actions</p>

      <div style="display: flex; gap: 12px; align-items: center; margin: 20px 0;">
        <pwc-menu
          label="File Actions"
          icon="folder"
          variant="primary"
          size="m">
          <pwc-list-item 
            label="New File" 
            icon="plus"
            (pwc-click)="performAction('create')">
          </pwc-list-item>
          <pwc-list-item 
            label="Edit File" 
            icon="edit"
            (pwc-click)="performAction('edit')">
          </pwc-list-item>
          <pwc-list-item 
            label="Delete File" 
            icon="trash"
            (pwc-click)="performAction('delete')">
          </pwc-list-item>
        </pwc-menu>

        <pwc-menu
          label="More Options"
          icon="ellipsis-h"
          variant="outline"
          size="m">
          <pwc-list-item 
            label="Copy Link" 
            icon="link"
            (pwc-click)="performAction('copy')">
          </pwc-list-item>
          <pwc-list-item 
            label="Export" 
            icon="download"
            (pwc-click)="performAction('export')">
          </pwc-list-item>
        </pwc-menu>
      </div>

      <div style="margin-top: 16px; padding: 12px; background: #f0f0f0; border-radius: 4px;">
        <strong>Last Action:</strong> {{ lastAction || 'None' }}
      </div>
    </div>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MenuDemo {
  lastAction = '';

  performAction(action: string): void {
    this.lastAction = action;
    console.log(`Action performed: ${action}`);
  }
}

// Create dropdown menu with list items
const menu = document.createElement('pwc-menu');
menu.setAttribute('label', 'Actions');
menu.setAttribute('icon', 'settings');
menu.setAttribute('variant', 'primary');

// Add menu items as children
const menuItems = ['Edit Item', 'Copy Item', 'Delete Item'];
menuItems.forEach(itemLabel => {
  const listItem = document.createElement('pwc-list-item');
  listItem.setAttribute('label', itemLabel);
  menu.appendChild(listItem);
});

document.body.appendChild(menu);

Usage Patterns

Action Dropdowns - Group related actions under a single trigger button for cleaner interface organization
Context Menus - Provide contextual operations that appear based on user interaction with specific elements
Navigation Enhancement - Supplement primary navigation with secondary menu options and quick access features
Settings Access - Organize configuration options and user preferences in accessible dropdown interfaces

Best Practices

Content Strategy Guidelines

Clear Action Labels - Use descriptive, action-oriented text that clearly communicates the result of selection
Logical Grouping - Organize related actions together and maintain consistent menu structure across similar contexts
Icon Consistency - Apply consistent iconography that matches semantic meaning and maintains visual hierarchy
Contextual Relevance - Show only actions that are relevant to the current state and user permissions

Performance Optimization

Lazy Loading - Initialize menu content only when needed to reduce initial bundle size and improve load times
Event Delegation - Use efficient event handling patterns to minimize memory usage with multiple menu instances
Positioning Caching - Cache positioning calculations to prevent unnecessary recomputation during scroll and resize
Content Virtualization - For large menu lists, implement virtualization to maintain smooth performance

Integration Architecture

State Management - Integrate menu state with application state management for consistent behavior across components
Accessibility Integration - Ensure menu interactions work seamlessly with screen readers and keyboard navigation patterns
Theme Compatibility - Design menu styling to work with both light and dark theme variations
Responsive Integration - Implement adaptive behavior that works across desktop, tablet, and mobile viewport sizes

Common Use Cases

Data Table Headers

Row Actions - Individual record operations like edit, copy, delete for specific data rows
Bulk Operations - Multi-select actions for processing multiple records simultaneously
Export Options - Various data export formats accessible through dropdown menu triggers

Search Result Sections

Filter Options - Dynamic filtering controls that appear based on search context and available criteria
Sort Methods - Multiple sorting options organized in logical groups with clear visual hierarchy
View Modes - Display format options like list, grid, or card views accessible through menu interface

Widget Actions - Configuration options for individual dashboard components and data displays
Refresh Controls - Manual and automated refresh options with timing configuration settings
Display Settings - Customization options for chart types, date ranges, and visualization preferences

Troubleshooting

Common Issues

Actions Not Triggering

Problem: Menu items don't respond to click events or callbacks aren't firing

Solutions:

Verify event listeners are properly attached to list items within the menu
Check that custom event propagation isn't being prevented by parent components
Ensure the menu component is properly imported and registered in your application

Actions Not Visible

Problem: Menu doesn't open or appears empty when triggered

Solutions:

Check that the menu's open state is properly managed and triggered by button clicks
Verify that list items are correctly slotted within the menu component structure
Ensure proper CSS styling isn't hiding the menu with display:none or visibility:hidden

Layout Issues

Problem: Menu positioning is incorrect or appears off-screen

Solutions:

Verify that Floating UI positioning is working correctly with proper anchor references
Check viewport boundaries and ensure collision detection is functioning as expected
Review z-index stacking to prevent menu from appearing behind other interface elements

Icon Problems

Problem: Icons don't display correctly or are missing from menu buttons and items

Solutions:

Confirm FontAwesome icon keys are valid and properly referenced in icon attributes
Check that icon fonts are loaded and available in the application bundle
Verify icon size and color properties match the component's design token system

Implementation Support

Framework Integration - Comprehensive examples and guides for React, Angular, and vanilla JavaScript implementations
Design Token Integration - Full compatibility with PWC design system tokens for consistent styling and theming
Accessibility Testing - Built-in WCAG 2.1 AA compliance with screen reader support and keyboard navigation

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.

Menu Component

Overview

Core Capabilities

Basic Implementation

Usage Patterns

Best Practices

Content Strategy Guidelines

Performance Optimization

Integration Architecture

Common Use Cases

Data Table Headers

Search Result Sections

Dashboard Widget Headers

Troubleshooting

Common Issues

Actions Not Triggering

Actions Not Visible

Layout Issues

Icon Problems

Implementation Support

Resources

Storybook Documentation