Menu
Menu
Resources
Menu is a container that presents a selection of choices or actions for a user to choose from. The user opens it with a customizable trigger, e.g., an interactive element such as a button, or an interaction, such as right mouse click or keyboard shortcut.
Clicking on the menu trigger will display a list of actions that the user can take.
Menus can contain submenus which present the user with a set of items to interact with, creating a cascading effect.
- Creating submenus as separate components will allow you to reuse them in different parts of your application and make your code more maintainable.
- Limit the number of levels in your menu to avoid overwhelming users.
Menu items can optionally be grouped together to organize related actions using a group label and separator.
A MenuGroup can be used without a label prop to visually separate groups of menu items.
Icons can be used to help users quickly identify the type of action they can take.
- Icons should be displayed before a menu item label.
- Use icons consistently across all menu items within the same group.
Placement of the menu can be specified using placement prop. The menu will be positioned relative to child of the MenuTrigger component.
By default, the root menu is aligned to the "bottom-start" of the trigger element and submenus to the "right-start" of the parent menu item.
When a menu extends beyond the application window, the menu defaults to span the maximum height of the viewport and scroll.
A Menu can be shown relative to a virtual element using the getVirtualElement prop. This can be used to create a context menu.
You can add descriptions to provide extra context using the Text and Stack Layout components.
Clicking on the menu trigger will display a list of actions that the user can take.
Menus can contain submenus which present the user with a set of items to interact with, creating a cascading effect.
- Creating submenus as separate components will allow you to reuse them in different parts of your application and make your code more maintainable.
- Limit the number of levels in your menu to avoid overwhelming users.
Menu items can optionally be grouped together to organize related actions using a group label and separator.
A MenuGroup can be used without a label prop to visually separate groups of menu items.
Icons can be used to help users quickly identify the type of action they can take.
- Icons should be displayed before a menu item label.
- Use icons consistently across all menu items within the same group.
Placement of the menu can be specified using placement prop. The menu will be positioned relative to child of the MenuTrigger component.
By default, the root menu is aligned to the "bottom-start" of the trigger element and submenus to the "right-start" of the parent menu item.
When a menu extends beyond the application window, the menu defaults to span the maximum height of the viewport and scroll.
A Menu can be shown relative to a virtual element using the getVirtualElement prop. This can be used to create a context menu.
You can add descriptions to provide extra context using the Text and Stack Layout components.
Clicking on the menu trigger will display a list of actions that the user can take.
Menus can contain submenus which present the user with a set of items to interact with, creating a cascading effect.
- Creating submenus as separate components will allow you to reuse them in different parts of your application and make your code more maintainable.
- Limit the number of levels in your menu to avoid overwhelming users.
Menu items can optionally be grouped together to organize related actions using a group label and separator.
A MenuGroup can be used without a label prop to visually separate groups of menu items.
Icons can be used to help users quickly identify the type of action they can take.
- Icons should be displayed before a menu item label.
- Use icons consistently across all menu items within the same group.
Placement of the menu can be specified using placement prop. The menu will be positioned relative to child of the MenuTrigger component.
By default, the root menu is aligned to the "bottom-start" of the trigger element and submenus to the "right-start" of the parent menu item.
When a menu extends beyond the application window, the menu defaults to span the maximum height of the viewport and scroll.
A Menu can be shown relative to a virtual element using the getVirtualElement prop. This can be used to create a context menu.
You can add descriptions to provide extra context using the Text and Stack Layout components.