adobe / adobe/spectrum-web-components

[Feat]: Add vertical expansion for nested submenus

Open
#5,726 2 comments 0 reactions 0 assignees View on GitHub
Component:Action menu Component:Menu Feature Mobile triage
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/
[![Screenshot-20250911-131705-Chrome.jpg](https://i.postimg.cc/GpXfqMs9/Screenshot-20250911-131705-Chrome.jpg)](https://postimg.cc/3yD9wF1H)

### Mockups or screenshots

Here is a proposed look for potential vertical expandability via design team

[![vertical-expansion-of-nested-submenu-in-mobile.png](https://i.postimg.cc/nhQK6XmZ/vertical-expansion-of-nested-submenu-in-mobile.png)](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):
[![Screenshot-2025-09-11-at-1-28-13-PM.png](https://i.postimg.cc/gcHZ5f2M/Screenshot-2025-09-11-at-1-28-13-PM.png)](https://postimg.cc/RqqhJpff)

Screencap for mobile (tray, provided by action-menu):
[![Screenshot-2025-09-11-at-1-29-42-PM.png](https://i.postimg.cc/Kjf3MgWX/Screenshot-2025-09-11-at-1-29-42-PM.png)](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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.