Sari la conținutul principal

Menu

The dropdown menu component provides a compact way to present a list of options or actions without overwhelming the interface. It allows users to select a value, trigger an action, or navigate to another section while conserving space on the screen.

Selection Menu

The single-selection dropdown allows users to choose one option from a predefined list. It's typically used in forms, filters, or settings where a compact input method is needed to reduce clutter. Once a user selects an option, the dropdown closes and the chosen value is displayed.

Breakpoints

Additional information about the Menu component treatment on Mobile can be accessed through the provided Figma link.

States

Edge Cases

Contextual Menu

Contextual Menu – widely accepted, flexible, and communicates that the menu adapts to the user's current context, offering both actions and settings.

States

Variations

Scrollable Content

Scrolling is enabled whenever content extends beyond the popover container.

Dismissal

Popovers can be dismissed by: interacting with the button that presented it again, making a decision within the popover, interacting with other page content, the ESC key.

Edge Cases

Target Sizes

Each menu item (cell) serves as the primary interactive target for selection. To ensure accessibility and ease of use across devices, the menu cell height is set to 44px. This provides a reliable touch and click area, reducing the chance of accidental selections.