Advanced Menus (Mega & Cascading)

Basic Usage

Simple menu button that opens a dropdown with list items. This establishes the baseline interaction pattern before introducing mega and cascading variants.

<ds-advanced-menu variant="menu" placement="bottom-start">
  <ds-button slot="trigger" variant="outlined">Menu</ds-button>
  <div slot="menu" role="menu">
    <button role="menuitem" data-menu-action="edit">Edit</button>
    <button role="menuitem" data-menu-action="delete">Delete</button>
    <button role="menuitem" data-menu-action="share">Share</button>
  </div>
</ds-advanced-menu>

Variants

Two primary menu patterns with different layouts and use cases.

Menu Variant

Simple dropdown menu with a list of items. Ideal for contextual actions or navigation options.

• Standard context menus for actions on hover/click
• Command palettes and action discovery
• Single-level item lists with 3–10 options

• Dense lists without grouping or hierarchy
• Multi-step workflows (use dialogs or sheets)
• When items don't fit in viewport (lazy load instead)

<ds-advanced-menu variant="menu">
  <ds-button slot="trigger">File</ds-button>
  <div slot="menu" role="menu">
    <button role="menuitem">New</button>
    <button role="menuitem">Open</button>
    <button role="menuitem">Save</button>
  </div>
</ds-advanced-menu>

Mega Variant

Multi-column panel for organizing rich content like grouped navigation links, descriptions, and icons.

• Complex navigation with 15+ items across 3–5 categories
• Product/feature discovery with descriptions and icons
• Section headers as prose headers or cards

• Simple 4–8 item menus (use Menu variant)
• Deeply nested hierarchies (limit to 2 levels)
• Variable-width columns that exceed 600px

<ds-advanced-menu variant="mega" placement="bottom-start">
  <ds-button slot="trigger" variant="filled">Products</ds-button>
  <div slot="menu" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px">
    <section>
      <h3>Platform</h3>
      <ul><li role="menuitem">Components</li></ul>
    </section>
  </div>
</ds-advanced-menu>

States

Hover Intent

Enable hover-open attribute for desktop menus that open on hover with configurable delays.

Cascading Submenus (Advanced)

API

Slots

Events

CSS Parts

Submenus and their auto-generated back button are your own slotted elements, not shadow parts, so style them with ordinary selectors — the back button carries a data-back attribute.

CSS Custom Properties

Accessibility

Keyboard Navigation

• Arrow Up/Down - Navigate between menu items within current level
• Arrow Right - Open submenu for parent item (respects RTL)
• Arrow Left - Close current submenu and return to parent
• Home / End - Jump to first/last item in menu
• Enter / Space - Activate focused menu item
• Escape - Close submenu or root menu (breadcrumb-aware)

ARIA Attributes

• role="menu" - Identifies menu container
• role="menuitem" - Identifies individual menu items
• aria-expanded - Reflects open/closed state on trigger element
• aria-haspopup="menu" - Indicates parent items with submenus
• aria-hidden - Hides menu surfaces from screen readers when closed
• aria-label - Provides accessible names for breadcrumb and back buttons

Screen Reader Support

• ✅ Announces menu open/close state to screen reader users
• ✅ Announces breadcrumb path through cascading submenus
• ✅ Auto-generated back buttons announced as "Back: parent-item-name"
• ✅ Menu item labels extracted with icon names filtered out
• ✅ Submenu level and position announced for context

Focus Management

• ✅ Focus trap active while menu open (focus stays within menu hierarchy)
• ✅ Focus returns to trigger element when menu closes
• ✅ Focus visible indicators meet WCAG 2.2 AA standards
• ✅ Visible focus ring uses --md-sys-color-primary with 2px outline and 2px offset
• ✅ Focus automatically moves to first item when menu opens

Color Contrast

• ✅ Menu text meets WCAG 2.2 AA contrast requirements (4.5:1 minimum)
• ✅ Focus indicators have sufficient contrast (3:1 minimum)
• ✅ Ripple effects use primary color with sufficient opacity for visibility
• ✅ Scrim overlay meets readability requirements (32% opacity per MD3)

Browser Support

• Chrome 90+ - Full support including CSS Anchor Positioning (v125+)
• Firefox 88+ - Full support with fallback positioning
• Safari 14+ - Full support with fallback positioning (Anchor Positioning in v18+)
• Edge 90+ - Full support including CSS Anchor Positioning (v125+)

Note: CSS Anchor Positioning API (Chrome 125+, Safari 18+) provides optimal submenu positioning. Other browsers use fallback fixed positioning with manual offset calculations.

Usage Guidelines

• When to use: Use advanced menus for dense action sets, multi-column discovery surfaces, and hierarchical submenu navigation.
• When not to use: Avoid advanced menus for simple action lists where a standard menu is easier to scan and operate.
• Composition: Keep top-level labels concise, group related actions, and maintain predictable submenu direction and breadcrumb behavior.
• Common mistakes: Over-nesting actions increases navigation cost. Flatten structure whenever users can decide in one level.

Related Resources

• Menu - Material Design 3 Specification
• Menu Bar Pattern - ARIA Authoring Practices
• Button Component - Trigger elements
• Menu Component - Base menu implementation
• Navigation Drawer - Related navigation pattern