{
  "name": "admin-sidebar-nav-groups",
  "kind": "block",
  "primary": "admin-sidebar",
  "page": "/site/patterns/admin-sidebar.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "slot": "leading",
    "name": "demo-nav-3"
  },
  "html": "<admin-sidebar slot=\"leading\" name=\"demo-nav-3\">\n          <admin-topbar slot=\"header\">\n            <admin-entity-item slot=\"heading\">\n              <img slot=\"icon\" class=\"brand-logo\" src=\"/icons/agent-ui-light.svg\" alt=\"\">\n              <span slot=\"label\">My App</span>\n            </admin-entity-item>\n          </admin-topbar>\n          <section-ui>\n            <nav-ui>\n              <nav-item-ui icon=\"house\" text=\"Dashboard\" selected></nav-item-ui>\n              <nav-group-ui icon=\"chart-line\" text=\"Analytics\" open>\n                <nav-item-ui text=\"Overview\"></nav-item-ui>\n                <nav-item-ui text=\"Funnels\"></nav-item-ui>\n                <nav-item-ui text=\"Retention\"></nav-item-ui>\n              </nav-group-ui>\n              <nav-group-ui icon=\"folders\" text=\"Content\">\n                <nav-item-ui text=\"Pages\"></nav-item-ui>\n                <nav-item-ui text=\"Media\"></nav-item-ui>\n                <nav-item-ui text=\"Drafts\"></nav-item-ui>\n              </nav-group-ui>\n              <hr data-nav-divider />\n              <nav-item-ui icon=\"gear\" text=\"Settings\"></nav-item-ui>\n            </nav-ui>\n          </section-ui>\n        </admin-sidebar>",
  "source": "site/pages/patterns/admin-sidebar.html",
  "metadata": {
    "domain": "navigation",
    "description": "Admin sidebar with collapsible nav-group-ui sub-navs — each group owns a chevron and open state, nesting nav-item-ui children. For deep hierarchies (Analytics, Content) under a flat dashboard row.",
    "keywords": [
      "admin",
      "sidebar",
      "nav",
      "groups",
      "collapsible",
      "sub-nav",
      "nav-group-ui",
      "chevron",
      "open",
      "nested",
      "hierarchy",
      "nav-item-ui",
      "nav-ui",
      "rail",
      "navigation",
      "admin-sidebar",
      "analytics",
      "content",
      "deep",
      "tree"
    ]
  },
  "captured_at": "2026-06-09T18:16:34.245Z",
  "template": [
    {
      "id": "image",
      "component": "Image",
      "slot": "icon",
      "src": "/icons/agent-ui-light.svg"
    },
    {
      "id": "text",
      "component": "Text",
      "variant": "body",
      "slot": "label",
      "textContent": "My App"
    },
    {
      "id": "column",
      "component": "Column",
      "slot": "heading",
      "children": [
        "image",
        "text"
      ]
    },
    {
      "id": "admin-topbar",
      "component": "AdminTopbar",
      "slot": "header",
      "children": [
        "column"
      ]
    },
    {
      "id": "nav-item",
      "component": "NavItem",
      "icon": "house",
      "selected": true,
      "text": "Dashboard"
    },
    {
      "id": "nav-item-2",
      "component": "NavItem",
      "text": "Overview"
    },
    {
      "id": "nav-item-3",
      "component": "NavItem",
      "text": "Funnels"
    },
    {
      "id": "nav-item-4",
      "component": "NavItem",
      "text": "Retention"
    },
    {
      "id": "nav-group",
      "component": "NavGroup",
      "icon": "chart-line",
      "open": true,
      "text": "Analytics",
      "children": [
        "nav-item-2",
        "nav-item-3",
        "nav-item-4"
      ]
    },
    {
      "id": "nav-item-5",
      "component": "NavItem",
      "text": "Pages"
    },
    {
      "id": "nav-item-6",
      "component": "NavItem",
      "text": "Media"
    },
    {
      "id": "nav-item-7",
      "component": "NavItem",
      "text": "Drafts"
    },
    {
      "id": "nav-group-2",
      "component": "NavGroup",
      "icon": "folders",
      "text": "Content",
      "children": [
        "nav-item-5",
        "nav-item-6",
        "nav-item-7"
      ]
    },
    {
      "id": "divider",
      "component": "Divider",
      "data-nav-divider": ""
    },
    {
      "id": "nav-item-8",
      "component": "NavItem",
      "icon": "gear",
      "text": "Settings"
    },
    {
      "id": "nav",
      "component": "Nav",
      "children": [
        "nav-item",
        "nav-group",
        "nav-group-2",
        "divider",
        "nav-item-8"
      ]
    },
    {
      "id": "root",
      "component": "Sidebar",
      "slot": "leading",
      "name": "demo-nav-3",
      "children": [
        "admin-topbar",
        "nav"
      ]
    }
  ]
}