Dynamic Menu
The Dynamic Menu can be used to give a user a variable number of actions to take. When that list of actions is long, a search mechanism is provided.
BaseDesktop OnlyRequires ui:scrollerWrapper
Preview
About Dynamic Menu
The Dynamic Menu is a modified concept of the Menu component, used when the number of actions available to the user is dynamic or variable. It can also be useful when the number of actions in the menu is large enough that a search functionality would be required.
The component is composed of a Popover, coupled with either a listbox
of options or an always expanded Autocomplete Combobox and a list of additional actions pinned to the bottom of the dialog. The Popover and pinned actions are constant through the 3 different states the Dynamic Menu can take.
When there are no actions other than the pinned actions, static content is displayed in the body of the Popover informing the user of the empty state. When there are 10 or less options in the menu a listbox
is used to display them in the body of the Popover. When there are more than 10 options an Autocomplete Combobox is used to display some options and allow searching through the rest of avialble options that may not be displayed.
Both the listbox
and Combobox versions come with Up
and Down
arrow key navigation through the list. The listbox
variant should only have a single focusable option. The Combobox variant should follow the expected keyboard behavior listed on the Combobox Component page.
Overview of CSS Classes
Selector | .slds-dynamic-menu |
---|---|
Summary | |
Support | dev-ready |
Restrict | section[role="dialog"] |
Variant | True |