{
  "_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": "ButtonMenu",
  "description": "Icon button paired with a popover dropdown menu of selectable actions. Combines an SLDS icon button trigger with an SLDS dropdown panel containing a role=menu list of items, headers, dividers, and optional submenus.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "buttonMenu",
    "restrict": [
      "div"
    ],
    "description": "Dropdown-trigger wrapper that anchors the icon button and the absolutely-positioned dropdown panel.",
    "attributes": {
      "static": {
        "class": "slds-dropdown-trigger slds-dropdown-trigger_click"
      }
    },
    "children": [
      {
        "name": "trigger",
        "restrict": [
          "button"
        ],
        "description": "Icon button that toggles the dropdown menu open and closed.",
        "attributes": {
          "static": {
            "class": "slds-button slds-button_icon"
          }
        },
        "modifiers": [
          {
            "name": "border",
            "attribute": "class",
            "value": "slds-button_icon-border-filled",
            "description": "Adds a filled border treatment to the icon trigger button."
          },
          {
            "name": "container",
            "attribute": "class",
            "value": "slds-button_icon-container",
            "description": "Renders the trigger as a transparent container icon button (no border or fill)."
          }
        ],
        "variants": [
          {
            "name": "size",
            "description": "Mutually exclusive size of the icon trigger button.",
            "options": [
              {
                "value": "x-small",
                "class": "slds-button_icon-x-small",
                "description": "Extra-small icon button trigger."
              },
              {
                "value": "small",
                "class": "slds-button_icon-small",
                "description": "Small icon button trigger."
              },
              {
                "value": "medium",
                "class": "",
                "description": "Default medium icon button trigger (no size class)."
              },
              {
                "value": "large",
                "class": "slds-button_icon-large",
                "description": "Large icon button trigger."
              }
            ],
            "default": "medium"
          }
        ],
        "children": [
          {
            "name": "icon",
            "description": "Glyph rendered inside the trigger button.",
            "attributes": {
              "static": {
                "class": "slds-button__icon"
              }
            },
            "component": "PrimitiveIcon"
          },
          {
            "name": "assistiveText",
            "restrict": [
              "span"
            ],
            "description": "Visually hidden label announcing the trigger action to assistive technology.",
            "attributes": {
              "static": {
                "class": "slds-assistive-text"
              }
            }
          }
        ]
      },
      {
        "name": "dropdown",
        "restrict": [
          "div"
        ],
        "description": "Popover panel containing the menu list. Positioned relative to the trigger.",
        "attributes": {
          "static": {
            "class": "slds-dropdown"
          }
        },
        "modifiers": [
          {
            "name": "small",
            "attribute": "class",
            "value": "slds-dropdown_small",
            "description": "Applies the small width treatment to the dropdown panel."
          },
          {
            "name": "actions",
            "attribute": "class",
            "value": "slds-dropdown_actions",
            "description": "Action-overflow treatment, tightens the panel padding for compact action lists."
          }
        ],
        "variants": [
          {
            "name": "horizontalAlign",
            "description": "Mutually exclusive horizontal alignment of the dropdown relative to the trigger.",
            "options": [
              {
                "value": "left",
                "class": "slds-dropdown_left",
                "description": "Aligns the dropdown to the inline-start edge of the trigger."
              },
              {
                "value": "right",
                "class": "slds-dropdown_right",
                "description": "Aligns the dropdown to the inline-end edge of the trigger."
              },
              {
                "value": "center",
                "class": "",
                "description": "Default center alignment (no horizontal alignment class)."
              }
            ]
          },
          {
            "name": "verticalAlign",
            "description": "Mutually exclusive vertical alignment of the dropdown relative to the trigger.",
            "options": [
              {
                "value": "top",
                "class": "",
                "description": "Default dropdown opens below the trigger (no vertical class)."
              },
              {
                "value": "bottom",
                "class": "slds-dropdown_bottom",
                "description": "Dropdown opens above the trigger."
              }
            ]
          },
          {
            "name": "nubbin",
            "description": "Optional nubbin (arrow) pointing at the trigger.",
            "options": [
              {
                "value": "top",
                "class": "slds-nubbin_top",
                "description": "Nubbin centered on the top edge."
              },
              {
                "value": "top-left",
                "class": "slds-nubbin_top-left",
                "description": "Nubbin on the top edge aligned to the inline-start."
              },
              {
                "value": "top-right",
                "class": "slds-nubbin_top-right",
                "description": "Nubbin on the top edge aligned to the inline-end."
              },
              {
                "value": "bottom",
                "class": "slds-nubbin_bottom",
                "description": "Nubbin centered on the bottom edge."
              },
              {
                "value": "bottom-left",
                "class": "slds-nubbin_bottom-left",
                "description": "Nubbin on the bottom edge aligned to the inline-start."
              },
              {
                "value": "bottom-right",
                "class": "slds-nubbin_bottom-right",
                "description": "Nubbin on the bottom edge aligned to the inline-end."
              }
            ]
          }
        ],
        "children": [
          {
            "name": "list",
            "restrict": [
              "ul"
            ],
            "description": "Menu list. Carries role=menu and groups dropdown items.",
            "repeats": true,
            "attributes": {
              "static": {
                "class": "slds-dropdown__list"
              }
            },
            "variants": [
              {
                "name": "length",
                "description": "Optional fixed-height treatment that caps the scrollable list height by item count.",
                "options": [
                  {
                    "value": "5",
                    "class": "slds-dropdown_length-5",
                    "description": "Constrains the visible list to five text-only items."
                  },
                  {
                    "value": "7",
                    "class": "slds-dropdown_length-7",
                    "description": "Constrains the visible list to seven text-only items."
                  },
                  {
                    "value": "10",
                    "class": "slds-dropdown_length-10",
                    "description": "Constrains the visible list to ten text-only items."
                  },
                  {
                    "value": "with-icon-5",
                    "class": "slds-dropdown_length-with-icon-5",
                    "description": "Constrains the visible list to five items with leading icons."
                  },
                  {
                    "value": "with-icon-7",
                    "class": "slds-dropdown_length-with-icon-7",
                    "description": "Constrains the visible list to seven items with leading icons."
                  },
                  {
                    "value": "with-icon-10",
                    "class": "slds-dropdown_length-with-icon-10",
                    "description": "Constrains the visible list to ten items with leading icons."
                  }
                ]
              }
            ],
            "children": [
              {
                "name": "item",
                "restrict": [
                  "li"
                ],
                "description": "Selectable menu item. Wraps an anchor or button with role=menuitem/menuitemcheckbox.",
                "repeats": true,
                "attributes": {
                  "static": {
                    "class": "slds-dropdown__item"
                  }
                },
                "modifiers": [
                  {
                    "name": "hasSubmenu",
                    "attribute": "class",
                    "value": "slds-has-submenu",
                    "description": "Marks the item as a parent that opens a submenu."
                  }
                ],
                "children": [
                  {
                    "name": "itemAction",
                    "restrict": [
                      "a",
                      "button"
                    ],
                    "description": "Interactive element carrying role=menuitem (or role=menuitemcheckbox).",
                    "children": [
                      {
                        "name": "itemLabel",
                        "restrict": [
                          "span"
                        ],
                        "description": "Truncated label for the menu item.",
                        "attributes": {
                          "static": {
                            "class": "slds-truncate"
                          }
                        },
                        "children": [
                          {
                            "name": "leadingSelectedIcon",
                            "restrict": [
                              "svg"
                            ],
                            "description": "Selected-state check glyph shown at the inline-start of selectable (menuitemcheckbox) items.",
                            "renderWhen": "propFilled",
                            "attributes": {
                              "static": {
                                "class": "slds-icon slds-icon_selected slds-icon_x-small slds-icon-text-default slds-m-right_x-small"
                              }
                            }
                          },
                          {
                            "name": "leadingIcon",
                            "restrict": [
                              "svg"
                            ],
                            "description": "Leading utility glyph rendered at the inline-start of the label.",
                            "renderWhen": "propFilled",
                            "attributes": {
                              "static": {
                                "class": "slds-icon slds-icon_x-small slds-icon-text-default slds-m-right_x-small"
                              }
                            }
                          },
                          {
                            "name": "leadingStandardIcon",
                            "restrict": [
                              "svg"
                            ],
                            "description": "Leading standard-size icon used when the list opts into the with-icon length treatment.",
                            "renderWhen": "propFilled",
                            "attributes": {
                              "static": {
                                "class": "slds-icon slds-icon_small slds-m-right_small"
                              }
                            }
                          }
                        ]
                      },
                      {
                        "name": "trailingIcon",
                        "restrict": [
                          "svg"
                        ],
                        "description": "Trailing glyph at the inline-end of the item (e.g. submenu chevron or contextual icon).",
                        "renderWhen": "propFilled",
                        "attributes": {
                          "static": {
                            "class": "slds-icon slds-icon_x-small slds-icon-text-default slds-m-left_small slds-shrink-none"
                          }
                        }
                      }
                    ]
                  },
                  {
                    "name": "submenu",
                    "restrict": [
                      "div"
                    ],
                    "description": "Nested submenu panel rendered next to a hasSubmenu item.",
                    "attributes": {
                      "static": {
                        "class": "slds-dropdown slds-dropdown_submenu"
                      }
                    },
                    "variants": [
                      {
                        "name": "side",
                        "description": "Side the submenu extends toward.",
                        "options": [
                          {
                            "value": "right",
                            "class": "slds-dropdown_submenu-right",
                            "description": "Submenu opens to the inline-end of its parent item."
                          },
                          {
                            "value": "left",
                            "class": "slds-dropdown_submenu-left",
                            "description": "Submenu opens to the inline-start of its parent item."
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "name": "header",
                "restrict": [
                  "li"
                ],
                "description": "Non-interactive group heading inside the menu list.",
                "attributes": {
                  "static": {
                    "class": "slds-dropdown__header slds-truncate"
                  }
                }
              },
              {
                "name": "divider",
                "restrict": [
                  "li"
                ],
                "description": "Visual separator between groups of items. Role=separator.",
                "attributes": {
                  "static": {
                    "class": "slds-has-divider_top-space"
                  }
                }
              }
            ]
          }
        ]
      }
    ]
  },
  "stateClasses": [
    {
      "state": "open",
      "class": "slds-is-open"
    },
    {
      "state": "selected",
      "class": "slds-is-selected"
    }
  ],
  "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"
    },
    {
      "name": "selected",
      "type": "boolean",
      "description": "Whether the component is in the selected state"
    }
  ]
}