Skip to content

DropdownMenu: Render in a sheet/drawer on small viewports #57228

@jameskoster

Description

@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:

Dropdown

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:

Dropdown

cc @ciampo.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Design SystemIssues related to the system of combining components according to best practices.Needs Design FeedbackNeeds general design feedback.[Package] Components/packages/components[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    Status

    🔦 Needs triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions