DropdownMenu: Render in a sheet/drawer on small viewports

[jameskoster]

As dropdown menus with flyouts become more prevalent we should think about the UX on small screens in more detail. While it is generally best to optimise for fewer flyouts, the upper limits remain worthy of consideration. Moreover, even two-level menus – like the one we find in data view options – struggle to fit on small screens:

One potential solution would be to surface menus in a sheet/drawer, with dedicated controls to close the menu, or move up through its structure:

cc @ciampo.

[ciampo]

In terms of UX, I think this option makes a lot of sense.

I'm not sure how easy it would be to adaptDropdownMenu implementation to it, especially nested submenus.

@diegohaz , I believe we were already discussing having UIs fall back to drawers a few years ago. Does ariakit provide any similar functionality? In case it doesn't, do you think it would still be feasible? We'd be happy to help where possible.

[diegohaz]

@diegohaz , I believe we were already discussing having UIs fall back to drawers a few years ago. Does ariakit provide any similar functionality? In case it doesn't, do you think it would still be feasible? We'd be happy to help where possible.

Yes, it's possible to do that through the updatePosition callback. Responsive Popover serves as an example.

However, I've changed my mind about turning popovers into modals on mobile being beneficial for UX. This is just a personal viewpoint, but it seems companies like Apple are in agreement since they've also reverted their trays back to positioned dropdown popovers.

Submenus do add complexity, but I'd explore a solution similar to the Sliding Menu.

[jameskoster]

I see trade-offs either way (drawer vs. sliding menu), but either would be an upgrade on infinitely stacking submenus that consume the entire screen :D If the Sliding Menu approach is simpler in terms of implementation then maybe we try that first?

[diegohaz]

Also, if it helps, an easy way to prevent submenus from getting cut off on smaller screens is to use the overlap prop.