{ "_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": "Menu", "description": "Initializes a trigger element around the dropdown", "structure": { "name": "root", "restrict": [ "div" ], "description": "Initializes a trigger element around the dropdown", "children": [ { "name": "trigger", "restrict": [ "button" ], "description": "Menu trigger button", "attributes": { "static": { "aria-haspopup": "menu", "class": "slds-button slds-button_icon slds-button_icon-border-filled" }, "bound": { "aria-expanded": { "prop": "isOpen" } } }, "children": [ { "name": "triggerIcon", "restrict": [ "svg" ], "description": "Glyph rendered inside the trigger button", "attributes": { "static": { "aria-hidden": "true", "class": "slds-button__icon" } } }, { "name": "triggerAssistiveText", "restrict": [ "span" ], "description": "Visually-hidden label for the trigger button", "attributes": { "static": { "class": "slds-assistive-text" } } } ], "modifiers": [ { "name": "iconLarge", "attribute": "class", "value": "slds-button_icon-large", "description": "Large icon trigger button" }, { "name": "iconXSmall", "attribute": "class", "value": "slds-button_icon-x-small", "description": "Extra small icon trigger button" }, { "name": "iconContainer", "attribute": "class", "value": "slds-button_icon-container", "description": "Bare icon container trigger (no border-filled background); used with nubbin positioning" } ] }, { "name": "dropdown", "restrict": [ "div" ], "description": "Initializes dropdown", "renderWhen": "slotFilled", "children": [ { "name": "header", "restrict": [ "div" ], "description": "Adds padding to area above dropdown menu list", "renderWhen": "slotFilled", "slot": { "name": "header" }, "attributes": { "static": { "class": "slds-dropdown__header slds-truncate" } } }, { "name": "items", "restrict": [ "ul" ], "description": "Menu items list", "attributes": { "static": { "role": "menu", "class": "slds-dropdown__list" } }, "children": [ { "name": "menuItem", "restrict": [ "li" ], "description": "Initializes dropdown item", "repeats": true, "attributes": { "static": { "role": "presentation", "class": "slds-dropdown__item" } }, "children": [ { "name": "menuItemLink", "restrict": [ "a" ], "description": "Interactive target inside the menu item. Carries role=menuitem (or menuitemcheckbox when used as a toggle).", "attributes": { "static": { "role": "menuitem" } }, "children": [ { "name": "menuItemLabel", "restrict": [ "span" ], "description": "Truncating label for the menu item's text content", "attributes": { "static": { "class": "slds-truncate" } }, "children": [ { "name": "menuItemLeadingIcon", "attributes": { "static": { "class": "slds-icon slds-icon_x-small slds-icon-text-default slds-m-right_x-small" } } }, { "name": "menuItemLeadingStandardIcon", "attributes": { "static": { "class": "slds-icon slds-icon_small slds-m-right_small" } }, "variants": [ { "name": "standardIcon", "description": "Standard sprite icon glyph class for length-with-icon rows", "options": [ { "value": "account", "class": "slds-icon-standard-account" }, { "value": "approval", "class": "slds-icon-standard-approval" }, { "value": "lead", "class": "slds-icon-standard-lead" }, { "value": "opportunity", "class": "slds-icon-standard-opportunity" }, { "value": "product", "class": "slds-icon-standard-product" } ] } ] }, { "name": "menuItemSelectedIcon", "attributes": { "static": { "class": "slds-icon slds-icon_selected slds-icon_x-small slds-icon-text-default slds-m-right_x-small" } } }, { "name": "menuItemStatusIcon", "attributes": { "static": { "class": "slds-m-horizontal_xx-small" } }, "children": [ { "name": "statusIconContainer", "attributes": { "static": { "class": "slds-icon_container" } }, "modifiers": [ { "name": "currentColor", "attribute": "class", "value": "slds-current-color", "description": "Tint the status icon using the surrounding text color" } ], "variants": [ { "name": "utilityIcon", "description": "Utility sprite glyph class for status icons in notification menus", "options": [ { "value": "success", "class": "slds-icon-utility-success" }, { "value": "warning", "class": "slds-icon-utility-warning" }, { "value": "error", "class": "slds-icon-utility-error" } ] } ], "children": [ { "name": "statusIconGlyph", "attributes": { "static": { "class": "slds-icon slds-icon_x-small" } } }, { "name": "statusIconAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } } ] } ] } ] }, { "name": "menuItemLeadingIcon", "restrict": [ "svg" ], "description": "Optional leading icon rendered before the label" }, { "name": "menuItemTrailingIcon", "restrict": [ "svg" ], "description": "Optional trailing icon rendered after the label (e.g. submenu indicator or row affordance)", "attributes": { "static": { "class": "slds-icon slds-icon_x-small slds-icon-text-default slds-m-left_small slds-shrink-none" } } } ], "modifiers": [ { "name": "hasSuccess", "attribute": "class", "value": "slds-has-success", "description": "Places a menu item into a success state" }, { "name": "hasWarning", "attribute": "class", "value": "slds-has-warning", "description": "Places a menu item into a warning state" }, { "name": "hasError", "attribute": "class", "value": "slds-has-error", "description": "Places a menu item into an errored state" } ] }, { "name": "submenu", "restrict": [ "div" ], "description": "Nested submenu panel for items that branch into a child menu", "renderWhen": "slotFilled", "slot": { "name": "submenu" } } ], "modifiers": [ { "name": "hasSubmenu", "attribute": "class", "value": "slds-has-submenu", "description": "Indicates this menu item opens a nested submenu" } ] }, { "name": "separator", "restrict": [ "li" ], "description": "visual separator between menu items", "attributes": { "static": { "role": "separator", "class": "slds-has-divider_top-space" } } } ], "slot": { "name": "default", "required": true }, "variants": [ { "name": "length", "description": "Fixed-row-count scroll cap for the items list (text-only items)", "options": [ { "value": "5", "class": "slds-dropdown_length-5", "description": "Forces overflow scrolling after 5 list items" }, { "value": "7", "class": "slds-dropdown_length-7", "description": "Forces overflow scrolling after 7 list items" }, { "value": "10", "class": "slds-dropdown_length-10", "description": "Forces overflow scrolling after 10 list items" } ] }, { "name": "lengthWithIcon", "description": "Fixed-row-count scroll cap for the items list (rows include a leading standard icon)", "options": [ { "value": "5", "class": "slds-dropdown_length-with-icon-5", "description": "Forces overflow scrolling after 5 list items with an icon" }, { "value": "7", "class": "slds-dropdown_length-with-icon-7", "description": "Forces overflow scrolling after 7 list items with an icon" }, { "value": "10", "class": "slds-dropdown_length-with-icon-10", "description": "Forces overflow scrolling after 10 list items with an icon" } ] } ] } ], "attributes": { "static": { "class": "slds-dropdown" } }, "modifiers": [ { "name": "inverse", "attribute": "class", "value": "slds-dropdown_inverse", "description": "Theme" }, { "name": "actions", "attribute": "class", "value": "slds-dropdown_actions", "description": "overflow action menu styling" }, { "name": "submenu", "attribute": "class", "value": "slds-dropdown_submenu", "description": "Marks this dropdown as a nested submenu panel" }, { "name": "submenuRight", "attribute": "class", "value": "slds-dropdown_submenu-right", "description": "Open submenu to the right of the parent menu item" } ], "variants": [ { "name": "position", "description": "Dropdown position", "default": "left", "options": [ { "value": "left", "class": "slds-dropdown_left", "description": "Positions dropdown to left side of target" }, { "value": "right", "class": "slds-dropdown_right", "description": "Positions dropdown to right side of target" }, { "value": "bottom", "class": "slds-dropdown_bottom", "description": "Positions dropdown to above target" } ] }, { "name": "size", "description": "Dropdown width", "default": "small", "options": [ { "value": "xx-small", "class": "slds-dropdown_xx-small", "description": "Sets min-width of 6rem/96px" }, { "value": "x-small", "class": "slds-dropdown_x-small", "description": "Sets min-width of 12rem/192px" }, { "value": "small", "class": "slds-dropdown_small", "description": "Sets min-width of 15rem/240px" }, { "value": "medium", "class": "slds-dropdown_medium", "description": "Sets min-width of 20rem/320px" }, { "value": "large", "class": "slds-dropdown_large", "description": "Sets min-width of 25rem/400px" }, { "value": "fluid", "class": "slds-dropdown_fluid", "description": "Sets width equal to input" } ] }, { "name": "nubbin", "description": "Dropdown nubbin (visual pointer) position relative to its trigger", "options": [ { "value": "top", "class": "slds-nubbin_top" }, { "value": "top-left", "class": "slds-nubbin_top-left" }, { "value": "top-right", "class": "slds-nubbin_top-right" }, { "value": "bottom", "class": "slds-nubbin_bottom" }, { "value": "bottom-left", "class": "slds-nubbin_bottom-left" }, { "value": "bottom-right", "class": "slds-nubbin_bottom-right" } ] } ] } ], "attributes": { "static": { "class": "slds-dropdown-trigger slds-dropdown-trigger_click" } } }, "states": [ { "name": "open", "type": "boolean", "aria": "aria-expanded", "description": "Whether the menu is open" }, { "name": "disabled", "type": "boolean", "aria": "aria-disabled", "description": "Whether the menu trigger is disabled" }, { "name": "selected", "type": "boolean", "description": "whether a menu item is selected" } ], "accessibility": { "requirements": [ { "id": "menu-role", "description": "The items list must carry role='menu' (or role='group' when grouped under a header)" }, { "id": "menuitem-role", "description": "Menu item links must carry role='menuitem' (or role='menuitemcheckbox' for toggleable items with aria-checked)" }, { "id": "keyboard-navigation", "description": "Arrow keys should navigate between items, Enter/Space selects" }, { "id": "escape-close", "description": "Pressing Escape should close the menu" }, { "id": "submenu-haspopup", "description": "A menu item that opens a submenu must have aria-haspopup='true' and aria-expanded reflecting its open state" } ] }, "extensions": { "com.salesforce-ux": { "dateAdded": "2015-09-04", "genReady": false, "lbc": "lightning-button-menu" } }, "cssSource": "./menu.css", "styleApi": { "status": "stable", "ready": true }, "stateClasses": [ { "state": "open", "class": "slds-is-open" }, { "state": "selected", "class": "slds-is-selected" } ] }