[menu] Inline / Drill-down / Non-Cascading Submenus

[genzzo]

Feature request

Summary

Is it possible to have a drill-down submenu behaviour? It feels like a better navigation style for certain scenarios, like on smaller devices

Here is the YouTube settings menu for example:

youtube-settings-menu.mp4

Examples in other libraries

I was able to find this which is actually based on the old Radix UI package: https://www.hellokookie.com/docs/dropdown-menu#drill-down-navigation.

Motivation

• Mobile or small screen devices
• Compact navigation for deeply nested menus

[mj12albert]

@genzzo You can follow this issue ~ #1894

[mj12albert]

Duplicate of #1894

[genzzo]

I have somewhat of a concrete API in mind.

The idea is to keep authoring submenus exactly as today (Menu.SubmenuRoot / Menu.SubmenuTrigger) and add a single prop on Menu.Root that decides how all of its submenus behave:

<Menu.Root submenuBehavior="drilldown"> {/* default: "flyout" (current behavior) */}

When submenuBehavior="drilldown" is present, a Pane manages what submenu is visible by assigning each submenu an ID, rendering the submenu with the matching active ID. This architecture, however, raises the following questions:

• Given the independence over every menu's submenuBehavior, one menu can have a drill-down behaviour while one of its submenus can still use flyout. In that case, should submenu components still require a Portal, Positioner, and Popup for their own submenus, or should they just share the ones from their parent menu? I'm more inclined towards the latter, preferably with a warning for the user when they are still present.
• Should pressing the Esc key on a drill-down submenu close it with its parent menu (cascade the effect until the first non-drill-down menu or until the whole menu closes), or should it just go back to the previous menu?
• Similar to the previous point, how should clicking a non-submenu item behave?
• Should another component like the View or Popup act as the pane or should we have a separate Pane component?
• What would be the ideal approach for handling radio submenus, specifically for when we want to display the selected value on the submenu's trigger?
• Should an explicit Submenu.Back component be introduced?
• I couldn't find any a11y standard for this specific shape, but would happy to take recommendations/advice.

I built a quick prototype of this. It doesn't 100% reflect the intended architecture, just a stepping stone towards it. Would love to have a maintainer's eye on it.

base-ui-drilldown-menu-demo.mp4