{
  "name": "admin-sidebar-nav-dividers",
  "kind": "block",
  "primary": "admin-sidebar",
  "page": "/site/patterns/admin-sidebar.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "slot": "leading",
    "name": "demo-nav-2"
  },
  "html": "<admin-sidebar slot=\"leading\" name=\"demo-nav-2\">\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-item-ui icon=\"tray\" text=\"Inbox\" badge=\"3\"></nav-item-ui>\n              <hr data-nav-divider />\n              <nav-item-ui icon=\"users\" text=\"Team\"></nav-item-ui>\n              <nav-item-ui icon=\"chart-bar\" text=\"Reports\"></nav-item-ui>\n              <hr data-nav-divider />\n              <nav-item-ui icon=\"gear\" text=\"Settings\"></nav-item-ui>\n              <nav-item-ui icon=\"lifebuoy\" text=\"Support\"></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 whose nav is split into visual sections with hr data-nav-divider separators between groups of nav-item-ui rows. For apps that want grouped nav without collapsible sub-navs.",
    "keywords": [
      "admin",
      "sidebar",
      "nav",
      "dividers",
      "separators",
      "hr",
      "data-nav-divider",
      "grouped",
      "sections",
      "nav-item-ui",
      "nav-ui",
      "rail",
      "navigation",
      "admin-sidebar",
      "dashboard",
      "inbox",
      "team",
      "settings",
      "support"
    ]
  },
  "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",
      "badge": "3",
      "icon": "tray",
      "text": "Inbox"
    },
    {
      "id": "divider",
      "component": "Divider",
      "data-nav-divider": ""
    },
    {
      "id": "nav-item-3",
      "component": "NavItem",
      "icon": "users",
      "text": "Team"
    },
    {
      "id": "nav-item-4",
      "component": "NavItem",
      "icon": "chart-bar",
      "text": "Reports"
    },
    {
      "id": "divider-2",
      "component": "Divider",
      "data-nav-divider": ""
    },
    {
      "id": "nav-item-5",
      "component": "NavItem",
      "icon": "gear",
      "text": "Settings"
    },
    {
      "id": "nav-item-6",
      "component": "NavItem",
      "icon": "lifebuoy",
      "text": "Support"
    },
    {
      "id": "nav",
      "component": "Nav",
      "children": [
        "nav-item",
        "nav-item-2",
        "divider",
        "nav-item-3",
        "nav-item-4",
        "divider-2",
        "nav-item-5",
        "nav-item-6"
      ]
    },
    {
      "id": "root",
      "component": "Sidebar",
      "slot": "leading",
      "name": "demo-nav-2",
      "children": [
        "admin-topbar",
        "nav"
      ]
    }
  ]
}