{
  "_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": "VerticalNavigation",
  "description": "Vertical navigation provides hierarchical navigation links within a sidebar.",
  "structure": {
    "name": "root",
    "restrict": [
      "nav",
      "fieldset"
    ],
    "description": "Navigation container. Renders as nav for link-based navigation, or fieldset for the radio-group variant.",
    "attributes": {
      "bound": {
        "aria-label": {
          "prop": "label"
        }
      }
    },
    "children": [
      {
        "name": "quickfind",
        "restrict": [
          "div"
        ],
        "description": "Optional search/filter input rendered above the sections.",
        "children": [
          {
            "name": "quickfindLabel",
            "restrict": [
              "label"
            ],
            "description": "Visually hidden label for the quickfind input."
          },
          {
            "name": "quickfindControl",
            "restrict": [
              "div"
            ],
            "description": "Wrapper around the quickfind input that hosts the leading search icon.",
            "children": [
              {
                "name": "quickfindIconContainer",
                "restrict": [
                  "span"
                ],
                "description": "Optional icon container wrapping the leading search glyph.",
                "children": [
                  {
                    "name": "quickfindIconWrapped",
                    "restrict": [
                      "svg"
                    ],
                    "description": "Search glyph rendered inside the icon container."
                  }
                ]
              },
              {
                "name": "quickfindIcon",
                "restrict": [
                  "svg"
                ],
                "description": "Search glyph rendered directly inside the control (no container wrapper)."
              },
              {
                "name": "quickfindInput",
                "restrict": [
                  "input"
                ],
                "description": "The search input itself."
              }
            ]
          }
        ]
      },
      {
        "name": "sections",
        "restrict": [
          "div"
        ],
        "description": "Navigation sections",
        "repeats": true,
        "slot": {
          "name": "default"
        }
      },
      {
        "name": "sectionTitle",
        "restrict": [
          "h2",
          "legend"
        ],
        "description": "Section title of the vertical navigation"
      },
      {
        "name": "list",
        "restrict": [
          "ul"
        ],
        "description": "Unordered list grouping navigation items within a section.",
        "attributes": {
          "bound": {
            "aria-describedby": {
              "prop": "describedBy"
            }
          }
        }
      },
      {
        "name": "item",
        "restrict": [
          "li",
          "span"
        ],
        "description": "List of the vertical navigation",
        "repeats": true
      },
      {
        "name": "action",
        "restrict": [
          "a",
          "label",
          "button"
        ],
        "description": "Actionable element inside of vertical navigation list item",
        "attributes": {
          "bound": {
            "aria-current": {
              "prop": "current"
            }
          }
        },
        "children": [
          {
            "name": "actionIconContainer",
            "restrict": [
              "span"
            ],
            "description": "Optional container for a leading icon glyph rendered inside an action.",
            "children": [
              {
                "name": "actionIcon",
                "restrict": [
                  "svg"
                ],
                "description": "Leading icon glyph for an action."
              },
              {
                "name": "actionIconAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden text describing the leading icon."
              }
            ]
          },
          {
            "name": "actionBadge",
            "restrict": [
              "span"
            ],
            "description": "Optional notification badge rendered at the trailing edge of an action.",
            "children": [
              {
                "name": "actionBadgeAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden text describing the badge content."
              }
            ]
          },
          {
            "name": "radioFaux",
            "restrict": [
              "span"
            ],
            "description": "Used for styling the radio button"
          }
        ]
      },
      {
        "name": "overflow",
        "restrict": [
          "div"
        ],
        "description": "Optional overflow section with a toggle button and a collapsible list of additional items.",
        "attributes": {
          "bound": {
            "aria-expanded": {
              "prop": "overflowExpanded"
            }
          }
        },
        "children": [
          {
            "name": "overflowToggle",
            "restrict": [
              "button"
            ],
            "description": "Actionable element that toggles visibility of overflown list items",
            "attributes": {
              "bound": {
                "aria-controls": {
                  "prop": "overflowPanelId"
                },
                "aria-expanded": {
                  "prop": "overflowExpanded"
                }
              }
            },
            "children": [
              {
                "name": "overflowToggleIcon",
                "restrict": [
                  "svg"
                ],
                "description": "Chevron icon on the overflow toggle button."
              },
              {
                "name": "overflowToggleText",
                "restrict": [
                  "span"
                ],
                "description": "Text inside of actionable element that toggles visibility of overflown list items",
                "children": [
                  {
                    "name": "overflowToggleAssistiveText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Visually hidden suffix appended to the overflow toggle label (e.g. section name)."
                  }
                ]
              }
            ]
          },
          {
            "name": "overflowPanel",
            "restrict": [
              "div"
            ],
            "description": "Collapsible region revealed or hidden by the overflow toggle."
          }
        ]
      }
    ]
  },
  "states": [
    {
      "name": "selectedItem",
      "type": "enum",
      "aria": "aria-current",
      "description": "Marks the currently selected navigation item (aria-current='page' or 'true').",
      "options": []
    },
    {
      "name": "overflowExpanded",
      "type": "boolean",
      "aria": "aria-expanded",
      "description": "Whether the overflow section is expanded."
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "nav-label",
        "description": "Navigation container should have an accessible name (aria-label on nav, or legend on fieldset variant)."
      },
      {
        "id": "current-page",
        "description": "Active item's action should expose aria-current (e.g. 'page' or 'true')."
      },
      {
        "id": "list-described-by",
        "description": "Each list should reference its section heading via aria-describedby."
      },
      {
        "id": "overflow-controls",
        "description": "Overflow toggle should reference the panel it controls via aria-controls and reflect its state via aria-expanded."
      },
      {
        "id": "decorative-icons-hidden",
        "description": "Decorative icons should be marked aria-hidden='true' and paired with assistive text when meaningful."
      }
    ]
  }
}