{
  "name": "SubNav",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SubNav.tsx",
  "chapterTag": "23 Workspace",
  "chapter": "23-workspace.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "Vertical icon+label sub-nav column. Used inside master-detail page\nchromes — Dashboard left rail (13.19), Library tools side (15.12),\nSettings sections (25.7). Items have an active accent-soft fill plus\na 3px accent left-stripe.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "SubNav",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SubNavProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { SubNav } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Nav items + `<SubNavLabel>` group headers. Typically a mix of `<SubNavItem>` and `<SubNavLabel>` children."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "sub-nav"
  ],
  "examples": {
    "react": "<aside>\n  <SubNav>\n    <SubNavLabel>Tools</SubNavLabel>\n    <SubNavItem glyph={<ToolsIcon />} count={6} active href=\"/library/tools\">\n      Tools & MCP\n    </SubNavItem>\n    <SubNavItem glyph={<TasksIcon />} count={12} href=\"/library/tasks\">\n      Tasks\n    </SubNavItem>\n    <SubNavLabel>Shared features</SubNavLabel>\n    <SubNavItem glyph={<PersonaIcon />} href=\"/library/personas\">\n      Personas\n    </SubNavItem>\n  </SubNav>\n</aside>",
    "html": null,
    "css": ".sub-nav { display: flex; flex-direction: column; gap: 2px; }"
  }
}