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 available 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.

Base#

<div class="demo-only" style="height:13rem;position:relative;margin-left:1rem">
  <button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Show Favorites">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#favorite"></use>

States#

With 1 item#

<div class="demo-only" style="height:14rem;position:relative;margin-left:1rem">
  <button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Show Favorites">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#favorite"></use>

With fewer than 10 items#

<div class="demo-only" style="height:28rem;position:relative;margin-left:1rem">
  <button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Show Favorites">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#favorite"></use>

With greater than 10 items#

<div class="demo-only" style="height:38rem;position:relative;margin-left:1rem">
  <button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Show Favorites">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#favorite"></use>