{
  "_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-foundation.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": "Ordered list of breadcrumb items",
        "children": [
          {
            "name": "item",
            "restrict": [
              "li"
            ],
            "description": "Breadcrumb item. Renders either a link to an ancestor page or an overflow dropdown that collapses a run of intermediate items.",
            "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"
                      },
                      "bound": {
                        "aria-expanded": {
                          "prop": "isOpen"
                        }
                      }
                    },
                    "children": [
                      {
                        "name": "overflowTriggerIcon",
                        "restrict": [
                          "svg"
                        ],
                        "description": "Glyph rendered inside the overflow trigger.",
                        "attributes": {
                          "static": {
                            "aria-hidden": "true"
                          }
                        }
                      },
                      {
                        "name": "overflowTriggerAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visually-hidden label for the overflow trigger."
                      }
                    ]
                  },
                  {
                    "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"
                          }
                        },
                        "children": [
                          {
                            "name": "overflowMenuItem",
                            "restrict": [
                              "li"
                            ],
                            "description": "Individual collapsed breadcrumb entry exposed as a menu item.",
                            "repeats": true,
                            "attributes": {
                              "static": {
                                "role": "presentation"
                              }
                            },
                            "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
                                    }
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "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"
      }
    ]
  }
}