Cascading Menu / Sub Lists

[a11delavar]

Is your feature request related to a problem?

Cascading menu: it is described in Material spec here under "Cascading menu (Desktop only)".

Describe the solution you've considered

I have more or less implemented it by creating a MenuItem which extends ListItem. MenuItem has now sub slot that can contain another menu element (and nothing that doesn't extend Menu). Also the MenuItem handles the open/close state of that slotted menu element. It works well but does not have accessibility features as it was an emergency solution, so if it would be relevant to have insight on the implementation, please ask.

Telling all that, I would propose that Material team implements something more generic and dynamic, because I have noticed that having "sub-lists" for ListItems also makes much sense which is very related to Cascading Menus, technically speaking. Also extending ListItem for sub lists doesn't work as well, as its logic and ripple element make it very hard.

Maybe the end-solution should be that ListItems have that sub slot, which open the sub-lists inline, and MenuItem can override that behavior so it opens as overlay.

The proposal with ListItem is not speced in Material, so if it is rejected feel free to consider only the Cascading Menu part and rename the issue, and I will look further to describe extensibility issues with ListItem in another issue.

[neilvanlandingham]

Hi arshia11d,

I am also in need of an "emergency fix" for implementing cascading menus. I attempted an implementation along the lines of what you described, but I couldn't quite get mine working. Specifically, I couldn't get the slotted mwc-menu to display as an overlay. Here is a gist of what I have so far: https://gist.github.com/neilvanlandingham/309d947cf2277778f58dcbb6f2d259f0

Would you mind sharing your code or offering some additional guidance as to how you solved this problem? Many thanks!

[a11delavar]

@neilvanlandingham Hey,

Yeah I think you can take a look at my code for an "emergency fix" 😀

https://github.com/3mo-esolutions/model/blob/main/packages/shell/contextMenu/ContextMenuItem.ts

[asyncLiz]

Submenus are available now in M3