Side navigation

Side navigation lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation.

{
  "slug": "side-navigation",
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/side-navigation.json",
  "title": "Side navigation",
  "description": "Side navigation lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation.",
  "meta": {
    "category": "navigation",
    "documentationUrl": "https://spectrum.adobe.com/page/side-navigation/"
  },
  "type": "object",
  "properties": {
    "state": {
      "type": "string",
      "enum": [
        "default",
        "hover",
        "down",
        "keyboard focus"
      ],
      "default": "default"
    },
    "items": {
      "type": "array",
      "description": "The list of navigation items.",
      "items": {
        "type": "object",
        "properties": {
          "label": {
            "type": "string",
            "description": "Text label for the navigation item."
          },
          "state": {
            "type": "string",
            "enum": [
              "default",
              "hover",
              "down",
              "keyboard focus"
            ],
            "default": "default",
            "description": "State of the navigation item."
          },
          "icon": {
            "type": "string",
            "description": "Optional icon token for the navigation item."
          },
          "isSelected": {
            "type": "boolean",
            "default": false,
            "description": "Whether the item is currently selected."
          },
          "isDisabled": {
            "type": "boolean",
            "default": false,
            "description": "Whether the item is disabled."
          }
        },
        "required": [
          "label"
        ]
      }
    },
    "selectionMode": {
      "type": "string",
      "enum": [
        "none",
        "single",
        "multiple"
      ],
      "default": "single",
      "description": "How selection is handled for items."
    }
  },
  "required": [
    "items"
  ]
}