adobe / adobe/spectrum-web-components
[Feat]: Add vertical expansion for nested submenus
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 262
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 68
Description
### Code of conduct
- [x] 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/
[](https://postimg.cc/3yD9wF1H)
### Mockups or screenshots
Here is a proposed look for potential vertical expandability via design team
[](https://postimg.cc/TKfWbYQH)
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):
[](https://postimg.cc/RqqhJpff)
Screencap for mobile (tray, provided by action-menu):
[](https://postimg.cc/dZ70MDvn)
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?
- [x] Yes, please tell me the ticket number!
Contributor guide
Research direction
Start by locating the implementations and tests for sp-menu and sp-action-menu, then compare their current submenu behavior with Spectrum's Collapsible menu guidance. Review the linked accordion proof of concept for the intended presentation, while defining the required menu semantics and accessibility behavior. Done means nested submenus can expand vertically in the supported mobile presentation without relying on accordions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100