{ "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file", "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json", "apiVersion": "1.0.0", "name": "DynamicMenu", "description": "Popover-based menu surface that adapts its body content based on item count: an empty-state message, a vertical listbox of options, or a searchable combobox listbox. Anchored to a trigger button via top-left nubbin and bookended by a footer of secondary actions.", "extensions": { "com.salesforce-ux": { "genReady": false } }, "cssSource": "./dynamicMenu.css", "styleApi": { "status": "stable", "ready": true }, "structure": { "name": "dynamicMenu", "restrict": [ "section" ], "description": "Root popover container that hosts the dynamic-menu body and footer. Rendered as a dialog anchored to a trigger button with a top-left nubbin.", "attributes": { "static": { "class": "slds-popover slds-nubbin_top-left slds-dynamic-menu" } }, "children": [ { "name": "body", "restrict": [ "div" ], "description": "Popover body wrapper. Removes horizontal padding so child media and listbox content can extend edge to edge.", "attributes": { "static": { "class": "slds-popover__body slds-p-horizontal_none" } }, "children": [ { "name": "media", "restrict": [ "div" ], "description": "Media object wrapper that lays out the dynamic-menu content.", "attributes": { "static": { "class": "slds-media" } }, "children": [ { "name": "mediaBody", "restrict": [ "div" ], "description": "Media body that contains the dynamic-menu content variant (empty state, listbox, or searchable combobox).", "attributes": { "static": { "class": "slds-media__body" } }, "children": [ { "name": "emptyState", "restrict": [ "div" ], "description": "Empty-state container rendered when there are no items to list. Holds a header and an explanatory paragraph.", "renderWhen": { "prop": "itemCount", "eq": "zero" }, "attributes": { "static": { "class": "slds-p-vertical_x-small slds-p-horizontal_small" } }, "children": [ { "name": "header", "restrict": [ "h1", "h2", "h3", "h4", "h5", "h6" ], "description": "Presentational heading that titles the menu surface.", "attributes": { "static": { "class": "slds-dynamic-menu__header slds-m-bottom_x-small" } } }, { "name": "emptyMessage", "restrict": [ "p" ], "description": "Explanatory text shown when there are no items.", "attributes": { "static": {} } } ] }, { "name": "dropdown", "restrict": [ "div" ], "description": "Fluid dropdown container holding the listbox of items. Rendered when items are present.", "renderWhen": { "prop": "itemCount", "eq": "list" }, "attributes": { "static": { "class": "slds-dropdown_length-with-icon-7 slds-dropdown_fluid" } }, "children": [ { "name": "listbox", "restrict": [ "ul" ], "description": "Vertical listbox grouping the option rows.", "attributes": { "static": { "class": "slds-listbox slds-listbox_vertical" } }, "children": [ { "name": "listboxItem", "restrict": [ "li" ], "description": "Listbox item wrapper for a header row or an option row.", "repeats": true, "attributes": { "static": { "class": "slds-listbox__item" } }, "children": [ { "name": "headerOption", "restrict": [ "div" ], "description": "Plain header row that titles a listbox section. Centered media layout.", "renderWhen": { "prop": "itemKind", "eq": "header" }, "attributes": { "static": { "class": "slds-media slds-listbox__option slds-listbox__option_plain slds-media_center" } }, "children": [ { "name": "headerOptionHeading", "restrict": [ "h1", "h2", "h3", "h4", "h5", "h6" ], "description": "Presentational heading for the listbox header row.", "attributes": { "static": { "class": "slds-listbox__option-header" } } } ] }, { "name": "entityOption", "restrict": [ "div" ], "description": "Entity option row with a leading icon, primary label, and meta line.", "renderWhen": { "prop": "itemKind", "eq": "entity" }, "attributes": { "static": { "class": "slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" } }, "children": [ { "name": "optionIcon", "restrict": [ "span" ], "description": "Media figure that holds the option's leading icon container.", "attributes": { "static": { "class": "slds-media__figure slds-listbox__option-icon" } }, "children": [ { "name": "iconContainer", "restrict": [ "span" ], "description": "Standard icon container with a per-entity icon class.", "attributes": { "static": { "class": "slds-icon_container slds-icon-standard-account" } }, "children": [ { "name": "icon", "restrict": [ "svg" ], "description": "Small entity glyph rendered inside the icon container.", "attributes": { "static": { "class": "slds-icon slds-icon_small" } } } ] } ] }, { "name": "optionBody", "restrict": [ "span" ], "description": "Media body holding the option label and meta line.", "attributes": { "static": { "class": "slds-media__body" } }, "children": [ { "name": "optionText", "restrict": [ "span" ], "description": "Primary entity label.", "attributes": { "static": { "class": "slds-listbox__option-text slds-listbox__option-text_entity" } } }, { "name": "optionMeta", "restrict": [ "span" ], "description": "Secondary meta line under the entity label.", "attributes": { "static": { "class": "slds-listbox__option-meta slds-listbox__option-meta_entity" } } } ] } ] } ] } ] } ] }, { "name": "searchFormElement", "restrict": [ "div" ], "description": "Form-element wrapper for the search combobox. Rendered when the menu surface is searchable (typically when item count exceeds 10).", "renderWhen": { "prop": "itemCount", "eq": "searchable" }, "attributes": { "static": { "class": "slds-form-element" } }, "children": [ { "name": "searchLabel", "restrict": [ "label" ], "description": "Visually hidden label associating the search input with its accessible name.", "attributes": { "static": { "class": "slds-form-element__label slds-assistive-text" } } }, { "name": "searchControl", "restrict": [ "div" ], "description": "Form-element control that hosts the combobox.", "attributes": { "static": { "class": "slds-form-element__control" } }, "children": [ { "name": "comboboxContainer", "restrict": [ "div" ], "description": "Outer combobox container.", "attributes": { "static": { "class": "slds-combobox_container" } }, "children": [ { "name": "combobox", "restrict": [ "div" ], "description": "Combobox shell that wraps the search input and the listbox dropdown.", "attributes": { "static": { "class": "slds-combobox" } }, "children": [ { "name": "comboboxFormElement", "restrict": [ "div" ], "description": "Inner form-element wrapper that pairs the input with its trailing search icon. Padded on all sides.", "attributes": { "static": { "class": "slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right slds-m-around_small" } }, "children": [ { "name": "searchInput", "restrict": [ "input" ], "description": "Search input element that filters menu items.", "attributes": { "static": { "class": "slds-input slds-combobox__input" } } }, { "name": "searchIcon", "restrict": [ "span" ], "description": "Trailing icon container holding the search glyph.", "attributes": { "static": { "class": "slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right" } }, "children": [ { "name": "searchIconSvg", "restrict": [ "svg" ], "description": "Search glyph rendered in the input's trailing icon slot.", "attributes": { "static": { "class": "slds-icon slds-icon_x-small slds-icon-text-default" } } } ] } ] }, { "name": "searchDropdown", "restrict": [ "div" ], "description": "Fluid dropdown that holds the listbox of filtered items inside the combobox.", "attributes": { "static": { "class": "slds-dropdown_length-with-icon-7 slds-dropdown_fluid" } }, "children": [ { "name": "searchListbox", "restrict": [ "ul" ], "description": "Vertical listbox of filtered items inside the searchable combobox.", "attributes": { "static": { "class": "slds-listbox slds-listbox_vertical" } } } ] } ] } ] } ] } ] } ] } ] } ] }, { "name": "footer", "restrict": [ "footer" ], "description": "Popover footer containing the list of secondary actions for the menu.", "attributes": { "static": { "class": "slds-popover__footer" } }, "children": [ { "name": "actionList", "restrict": [ "ul" ], "description": "List wrapper for footer action buttons.", "attributes": { "static": {} }, "children": [ { "name": "actionItem", "restrict": [ "li" ], "description": "Footer action list item.", "repeats": true, "attributes": { "static": {} }, "children": [ { "name": "actionButton", "restrict": [ "button" ], "description": "Reset-styled, full-width button used as a secondary action in the menu footer.", "attributes": { "static": { "class": "slds-button slds-button_reset slds-p-vertical_xx-small slds-size_1-of-1" } }, "children": [ { "name": "actionIcon", "description": "Leading glyph rendered inside the action button.", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_left" } }, "component": "PrimitiveIcon" } ] } ] } ] } ] } ] }, "stateClasses": [ { "state": "open", "class": "slds-is-open" } ], "componentRefs": { "PrimitiveIcon": { "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.", "props": { "iconName": { "type": "string", "required": true, "description": "Sprite reference for the icon glyph" } } } }, "states": [ { "name": "open", "type": "boolean", "description": "Whether the component is in the open state" } ] }