[Feat]: Add vertical expansion for nested submenus #5726
Description
Code of conduct
- I agree to follow this project's code of conduct.
Impacted component(s)
sp-menu, sp-action-menu
Description of the requested feature
Feature request to allow submenus to expand/collapse vertically instead of horizontally. This would be very helpful in mobile, where mobile device usually has more vertical than horizontal space. While the concept exists in "spectrum design" it isn't implemented yet in SWC. See: https://spectrum.adobe.com/page/menu/#Collapsible
Current mobile submenu behavior as seen in the SWC docs at
https://opensource.adobe.com/spectrum-web-components/components/menu-item/
Mockups or screenshots
Here is a proposed look for potential vertical expandability via design team
Also, this vertical collapsible concept is approved by spectrum design... it just isn't implemented for menus in SWC library.
https://spectrum.adobe.com/page/menu/#Collapsible
Implementation notes or ideas
Here is a similar proof of concept using sp-accordion nested within action menu and menu items. This is the rendering and functionality we want, but not the semantics and accessibility that we want.
https://stackblitz.com/edit/vitejs-vite-o8lxtknv?file=src%2Fmy-element.ts
Screencaps for desktop (menu popover, provided by action-menu):
Screencap for mobile (tray, provided by action-menu):
Instead of using accordions, we should provide the ability to expand nested submenus in vertical format as a feature of menus/submenus themselves. This feature allows presentation of multiple combined menu sections at once in mobile, where vertical space is often more available than horizontal. Also, by combining multiple menus into a single dropdown, we can save a lot of horizontal space on the same line which might be needed for longer locale translations which is also highly effective for mobile.
Would you like to track this issue in Jira?
- Yes, please tell me the ticket number!