{
  "_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": "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"
        }
      },
      "static": {
        "class": "slds-nav-vertical"
      }
    },
    "children": [
      {
        "name": "quickfind",
        "restrict": [
          "div"
        ],
        "description": "Optional Quick Find search input rendered above the sections (form-element wrapper).",
        "children": [
          {
            "name": "quickfindLabel",
            "restrict": [
              "label"
            ],
            "description": "Visually hidden label for the Quick Find input.",
            "attributes": {
              "static": {
                "class": "slds-form-element__label slds-assistive-text"
              }
            }
          },
          {
            "name": "quickfindControl",
            "restrict": [
              "div"
            ],
            "description": "Form-element control wrapper with leading search icon.",
            "children": [
              {
                "name": "quickfindIconContainer",
                "restrict": [
                  "span"
                ],
                "description": "Icon container for the leading utility search glyph (used when the icon is wrapped in a span).",
                "children": [
                  {
                    "name": "quickfindIconWrapped",
                    "restrict": [
                      "svg"
                    ],
                    "description": "Search glyph rendered inside the icon container; uses input__icon_right because the container handles left positioning.",
                    "attributes": {
                      "static": {
                        "class": "slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default"
                      }
                    }
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-icon_container slds-icon-utility-search"
                  }
                }
              },
              {
                "name": "quickfindIcon",
                "restrict": [
                  "svg"
                ],
                "description": "Search glyph rendered directly inside the control (no icon container wrapper).",
                "attributes": {
                  "static": {
                    "class": "slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default"
                  }
                }
              },
              {
                "name": "quickfindInput",
                "restrict": [
                  "input"
                ],
                "description": "Search input element.",
                "attributes": {
                  "static": {
                    "class": "slds-input"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-form-element__control slds-input-has-icon slds-input-has-icon_left"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-form-element slds-p-horizontal_large"
          }
        }
      },
      {
        "name": "sections",
        "restrict": [
          "div"
        ],
        "description": "Navigation section grouping a title and a list (or fieldset) of items.",
        "repeats": true,
        "slot": {
          "name": "default"
        },
        "attributes": {
          "static": {
            "class": "slds-nav-vertical__section"
          }
        }
      },
      {
        "name": "sectionTitle",
        "restrict": [
          "h2",
          "legend"
        ],
        "description": "Section title of the vertical navigation",
        "attributes": {
          "static": {
            "class": "slds-nav-vertical__title"
          }
        }
      },
      {
        "name": "list",
        "restrict": [
          "ul"
        ],
        "description": "Unordered list of navigation items within a section.",
        "attributes": {
          "bound": {
            "aria-describedby": {
              "prop": "describedBy"
            }
          },
          "static": {}
        }
      },
      {
        "name": "item",
        "restrict": [
          "li",
          "span"
        ],
        "description": "List of the vertical navigation",
        "repeats": true,
        "attributes": {
          "static": {
            "class": "slds-nav-vertical__item"
          }
        }
      },
      {
        "name": "action",
        "restrict": [
          "a",
          "label",
          "button"
        ],
        "description": "Actionable element inside of vertical navigation list item",
        "attributes": {
          "bound": {
            "aria-current": {
              "prop": "current"
            }
          },
          "static": {
            "class": "slds-nav-vertical__action"
          }
        },
        "children": [
          {
            "name": "actionIconContainer",
            "restrict": [
              "span"
            ],
            "description": "Icon container for a leading utility glyph rendered inside an action (e.g. open_folder).",
            "children": [
              {
                "name": "actionIcon",
                "restrict": [
                  "svg"
                ],
                "description": "SVG glyph for the leading icon on the action.",
                "attributes": {
                  "static": {
                    "class": "slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small"
                  }
                }
              },
              {
                "name": "actionIconAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Assistive text describing the leading icon.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-icon_container slds-icon-utility-open_folder slds-line-height_reset"
              }
            }
          },
          {
            "name": "actionBadge",
            "restrict": [
              "span"
            ],
            "description": "Notification badge rendered at the trailing edge of an action (notifications variant).",
            "children": [
              {
                "name": "actionBadgeAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Assistive text describing the badge content (e.g. ':', 'New Items').",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-badge slds-col_bump-left"
              }
            }
          },
          {
            "name": "radioFaux",
            "restrict": [
              "span"
            ],
            "description": "Used for styling the radio button",
            "attributes": {
              "static": {
                "class": "slds-nav-vertical_radio-faux"
              }
            }
          }
        ]
      },
      {
        "name": "overflow",
        "restrict": [
          "div"
        ],
        "description": "Overflow section containing a toggle button and a collapsible list of additional items.",
        "attributes": {
          "bound": {
            "aria-expanded": {
              "prop": "overflowExpanded"
            }
          },
          "static": {
            "class": "slds-nav-vertical__overflow"
          }
        },
        "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"
                }
              },
              "static": {
                "class": "slds-button slds-button_reset slds-nav-vertical__action slds-nav-vertical__action_overflow"
              }
            },
            "children": [
              {
                "name": "overflowToggleIcon",
                "restrict": [
                  "svg"
                ],
                "description": "Chevron icon on the overflow toggle button.",
                "attributes": {
                  "static": {
                    "class": "slds-button__icon slds-button__icon_left"
                  }
                }
              },
              {
                "name": "overflowToggleText",
                "restrict": [
                  "span"
                ],
                "description": "Text inside of actionable element that toggles visibility of overflown list items",
                "children": [
                  {
                    "name": "overflowToggleAssistiveText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Assistive text appended to the overflow toggle label (e.g. the section name).",
                    "attributes": {
                      "static": {
                        "class": "slds-assistive-text"
                      }
                    }
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-nav-vertical__action-text"
                  }
                }
              }
            ]
          },
          {
            "name": "overflowPanel",
            "restrict": [
              "div"
            ],
            "description": "Collapsible region revealed/hidden by the overflow toggle.",
            "attributes": {
              "static": {}
            },
            "variants": [
              {
                "name": "visibility",
                "description": "Show/hide state of the overflow panel.",
                "options": [
                  {
                    "value": "show",
                    "class": "slds-show"
                  },
                  {
                    "value": "hide",
                    "class": "slds-hide"
                  }
                ]
              }
            ]
          }
        ]
      }
    ],
    "modifiers": [
      {
        "name": "compact",
        "attribute": "class",
        "value": "slds-nav-vertical_compact",
        "description": "Modifer to reduce spacing between navigation items"
      },
      {
        "name": "shade",
        "attribute": "class",
        "value": "slds-nav-vertical_shade",
        "description": "Modifier to adjust list item when vertical navigation is sitting on top of a shaded background"
      }
    ]
  },
  "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."
      }
    ]
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2017-03-01",
      "genReady": false,
      "lbc": "lightning-vertical-navigation"
    }
  },
  "cssSource": "./verticalNavigation.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "selectedItem",
      "class": "slds-is-active"
    }
  ]
}