Skip to content

DropdownMenu: nested submenus (flyouts) #423

Description

@czarandy

Feature

DropdownMenu supports only a flat list with one-level non-interactive sections — DropdownMenuOption is Divider | ItemData | Section, and ItemData has no recursion (src/components/DropdownMenu/types.ts); navigation is linear useListFocus (src/components/DropdownMenu/menuUtils.tsx).

Add nested submenus:

  • Data API: allow items on an item (nested array) to declare a submenu; optionally a composable sub-menu component for the JSX API.
  • Flyout opens toward inline-end with auto-flip when there's no room; RTL-aware.
  • Hover-intent (small delay / diagonal tolerance) so the submenu doesn't flicker while traversing.
  • Full keyboard support: inline-end arrow opens and focuses first item, inline-start arrow closes back to the parent, Enter/Space activate; parent item gets aria-haspopup="menu" + aria-expanded.

Notes

  • ContextMenu shares the item/keyboard infrastructure and should get submenus for free (or explicitly out of scope — decide in the PR).
  • Tests: pointer open/close, hover-intent, keyboard traversal, RTL direction.
  • Storybook example with two levels.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestlargeApproximately large amount of work

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions