Dynamic Menu
- HTML/CSS:Dev Ready
- Layout:Desktop Only
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
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-dynamic-menu |
|---|---|
| Summary | |
| Support | dev-ready |
| Restrict | section[role="dialog"] |
| Variant | True |
| Selector | .slds-dynamic-menu__header |
|---|---|
| Summary | Headers styles for dynamic menu |
| Restrict | .slds-dynamic-menu h3 |