{
  "_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": "Breadcrumbs",
  "description": "Use breadcrumbs to note the path of a record and help the user to navigate back to the parent.",
  "structure": {
    "name": "root",
    "restrict": [
      "nav"
    ],
    "description": "Use breadcrumbs to note the path of a record and help the user to navigate back to the parent.",
    "attributes": {
      "static": {
        "role": "navigation"
      },
      "bound": {
        "aria-label": {
          "prop": "label",
          "required": true
        }
      }
    },
    "children": [
      {
        "name": "list",
        "restrict": [
          "ol"
        ],
        "description": "Create breadcrumbs component",
        "children": [
          {
            "name": "item",
            "restrict": [
              "li"
            ],
            "description": "Item of the breadcrumb list",
            "repeats": true,
            "children": [
              {
                "name": "link",
                "restrict": [
                  "a"
                ],
                "description": "Breadcrumb link",
                "renderWhen": {
                  "prop": "isOverflow",
                  "eq": "false"
                },
                "attributes": {
                  "bound": {
                    "href": {
                      "prop": "href",
                      "required": true
                    }
                  },
                  "conditional": {
                    "aria-current": {
                      "when": "isCurrent",
                      "value": "page"
                    }
                  }
                },
                "slot": {
                  "name": "label",
                  "required": true
                }
              },
              {
                "name": "overflow",
                "restrict": [
                  "div"
                ],
                "description": "Overflow dropdown that collapses a run of intermediate breadcrumb items into a menu.",
                "renderWhen": {
                  "prop": "isOverflow",
                  "eq": "true"
                },
                "children": [
                  {
                    "name": "overflowTrigger",
                    "restrict": [
                      "button"
                    ],
                    "description": "Button that opens the overflow menu.",
                    "attributes": {
                      "static": {
                        "aria-haspopup": "true",
                        "class": "slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small"
                      },
                      "bound": {
                        "aria-expanded": {
                          "prop": "isOpen"
                        }
                      }
                    },
                    "children": [
                      {
                        "name": "overflowTriggerIcon",
                        "restrict": [
                          "svg"
                        ],
                        "description": "Glyph rendered inside the overflow trigger.",
                        "attributes": {
                          "static": {
                            "aria-hidden": "true",
                            "class": "slds-button__icon"
                          }
                        }
                      },
                      {
                        "name": "overflowTriggerAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visually-hidden label for the overflow trigger.",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ]
                  },
                  {
                    "name": "overflowDropdown",
                    "restrict": [
                      "div"
                    ],
                    "description": "Floating dropdown panel that holds the overflow menu items.",
                    "renderWhen": "slotFilled",
                    "children": [
                      {
                        "name": "overflowMenu",
                        "restrict": [
                          "ul"
                        ],
                        "description": "Menu list of collapsed breadcrumb entries.",
                        "attributes": {
                          "static": {
                            "role": "menu",
                            "class": "slds-dropdown__list"
                          }
                        },
                        "children": [
                          {
                            "name": "overflowMenuItem",
                            "restrict": [
                              "li"
                            ],
                            "description": "Individual collapsed breadcrumb entry exposed as a menu item.",
                            "repeats": true,
                            "attributes": {
                              "static": {
                                "role": "presentation",
                                "class": "slds-dropdown__item"
                              }
                            },
                            "children": [
                              {
                                "name": "overflowMenuItemLink",
                                "restrict": [
                                  "a"
                                ],
                                "description": "Interactive target inside the overflow menu item.",
                                "attributes": {
                                  "static": {
                                    "role": "menuitem"
                                  },
                                  "bound": {
                                    "href": {
                                      "prop": "href",
                                      "required": true
                                    }
                                  }
                                },
                                "children": [
                                  {
                                    "name": "overflowMenuItemLabel",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Truncating label for the overflow menu item's text content.",
                                    "slot": {
                                      "name": "label",
                                      "required": true
                                    },
                                    "attributes": {
                                      "static": {
                                        "class": "slds-truncate"
                                      }
                                    }
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ],
                    "attributes": {
                      "static": {
                        "class": "slds-dropdown slds-dropdown_left slds-dropdown_actions"
                      }
                    }
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-dropdown-trigger slds-dropdown-trigger_click"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-breadcrumb__item"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-breadcrumb slds-list_horizontal slds-wrap"
          }
        },
        "modifiers": [
          {
            "name": "verticalAlignCenter",
            "attribute": "class",
            "value": "slds-grid_vertical-align-center",
            "description": "Vertically centers the breadcrumb row; applied when the list contains an overflow trigger of a different intrinsic height."
          }
        ]
      }
    ]
  },
  "states": [
    {
      "name": "isCurrent",
      "type": "boolean",
      "description": "Whether the breadcrumb item represents the current page"
    },
    {
      "name": "isOverflow",
      "type": "boolean",
      "description": "Whether this breadcrumb item is an overflow dropdown rather than a direct link"
    },
    {
      "name": "isOpen",
      "type": "boolean",
      "aria": "aria-expanded",
      "description": "Whether the overflow dropdown is open"
    },
    {
      "name": "hasOverflow",
      "type": "boolean",
      "description": "Whether an overflow menu is shown for truncated breadcrumbs"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "nav-label",
        "description": "Navigation should have an aria-label like 'Breadcrumb'"
      },
      {
        "id": "current-page",
        "description": "Current page should have aria-current='page'"
      },
      {
        "id": "overflow-haspopup",
        "description": "The overflow trigger must carry aria-haspopup='true' and aria-expanded reflecting its open state"
      },
      {
        "id": "overflow-menu-role",
        "description": "The overflow items list must carry role='menu' with role='presentation' on its <li> wrappers and role='menuitem' on the interactive targets"
      }
    ]
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2015-09-04",
      "genReady": false,
      "lbc": "lightning-breadcrumbs"
    }
  },
  "cssSource": "./breadcrumbs.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "isOpen",
      "class": "slds-is-open"
    }
  ]
}