{
  "name": "admin-shell-standard",
  "kind": "page",
  "primary": "div",
  "page": "/packages/web-components/patterns/admin-shell/admin-shell.examples.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-artifact-item": "",
    "data-artifact-label": "standard — leading nav + content"
  },
  "html": "<admin-shell class=\"admin-shell-demo\" mode=\"\">\n        <admin-sidebar slot=\"leading\" name=\"demo-standard\">\n          <admin-topbar slot=\"header\">\n            <select-ui avatar=\"/icons/agent-ui-light.svg\" value=\"my-app\" variant=\"ghost\" style=\"flex:1\">\n              <option value=\"my-app\">My App</option>\n              <option value=\"my-app-staging\">My App · Staging</option>\n            </select-ui>\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=\"users\" text=\"Team\"></nav-item-ui>\n              <nav-item-ui icon=\"chart-bar\" text=\"Reports\"></nav-item-ui>\n              <nav-item-ui icon=\"gear\" text=\"Settings\"></nav-item-ui>\n            </nav-ui>\n          </section-ui>\n          <admin-statusbar slot=\"footer\">\n            <admin-entity-item slot=\"heading\">\n              <avatar-ui slot=\"icon\" text=\"MC\" size=\"sm\"></avatar-ui>\n              <span slot=\"label\">Maya Chen</span>\n            </admin-entity-item>\n          </admin-statusbar>\n        </admin-sidebar>\n        <admin-content>\n          <admin-topbar>\n            <button-ui data-sidebar-toggle=\"leading\" icon=\"sidebar\" variant=\"ghost\" size=\"sm\"></button-ui>\n            <breadcrumb-ui><a href=\"#\">My App</a><span>Dashboard</span></breadcrumb-ui>\n            <span data-spacer></span>\n            <div data-actions>\n              <button-ui text=\"+ New\" variant=\"primary\" size=\"sm\"></button-ui>\n            </div>\n          </admin-topbar>\n          <admin-scroll>\n            <admin-page>\n              <admin-page-header>\n                <header>\n                  <div><h1>Dashboard</h1></div>\n                  <p>Welcome back. Here's what's happening today.</p>\n                </header>\n              </admin-page-header>\n              <admin-page-body>\n                <section>\n                  <div class=\"demo-content-area\"><p>Page content goes here.</p></div>\n                </section>\n              </admin-page-body>\n            </admin-page>\n          </admin-scroll>\n        </admin-content>\n      </admin-shell>",
  "source": "packages/web-components/patterns/admin-shell/admin-shell.examples.html",
  "metadata": {
    "domain": "layout",
    "description": "Standard admin shell — leading sidebar with workspace switcher, nav rail, user switcher; content column with topbar breadcrumb and scrollable page.",
    "keywords": [
      "admin",
      "shell",
      "layout",
      "sidebar",
      "nav",
      "topbar",
      "breadcrumb",
      "content",
      "page",
      "dashboard",
      "saas"
    ]
  },
  "captured_at": "2026-06-10T20:25:14.783Z",
  "template": [
    {
      "id": "choice-picker",
      "component": "ChoicePicker",
      "avatar": "/icons/agent-ui-light.svg",
      "value": "my-app",
      "variant": "ghost",
      "options": [
        {
          "value": "my-app",
          "label": "My App"
        },
        {
          "value": "my-app-staging",
          "label": "My App · Staging"
        }
      ]
    },
    {
      "id": "admin-topbar",
      "component": "AdminTopbar",
      "slot": "header",
      "children": [
        "choice-picker"
      ]
    },
    {
      "id": "nav-item",
      "component": "NavItem",
      "icon": "house",
      "selected": true,
      "text": "Dashboard"
    },
    {
      "id": "nav-item-2",
      "component": "NavItem",
      "icon": "users",
      "text": "Team"
    },
    {
      "id": "nav-item-3",
      "component": "NavItem",
      "icon": "chart-bar",
      "text": "Reports"
    },
    {
      "id": "nav-item-4",
      "component": "NavItem",
      "icon": "gear",
      "text": "Settings"
    },
    {
      "id": "nav",
      "component": "Nav",
      "children": [
        "nav-item",
        "nav-item-2",
        "nav-item-3",
        "nav-item-4"
      ]
    },
    {
      "id": "avatar",
      "component": "Avatar",
      "slot": "icon",
      "size": "sm",
      "text": "MC"
    },
    {
      "id": "text",
      "component": "Text",
      "variant": "body",
      "slot": "label",
      "textContent": "Maya Chen"
    },
    {
      "id": "column-2",
      "component": "Column",
      "slot": "heading",
      "children": [
        "avatar",
        "text"
      ]
    },
    {
      "id": "admin-statusbar",
      "component": "AdminStatusbar",
      "slot": "footer",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "demo-standard",
      "component": "Sidebar",
      "slot": "leading",
      "name": "demo-standard",
      "children": [
        "admin-topbar",
        "nav",
        "admin-statusbar"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "icon": "sidebar",
      "size": "sm",
      "variant": "ghost",
      "data-sidebar-toggle": "leading"
    },
    {
      "id": "text-2",
      "component": "Text",
      "textContent": "My App",
      "variant": "body"
    },
    {
      "id": "link",
      "component": "Link",
      "href": "#",
      "text": "My App",
      "children": [
        "text-2"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "variant": "body",
      "textContent": "Dashboard"
    },
    {
      "id": "breadcrumb",
      "component": "Breadcrumb",
      "children": [
        "link",
        "text-3"
      ]
    },
    {
      "id": "text-4",
      "component": "Text",
      "variant": "body",
      "data-spacer": ""
    },
    {
      "id": "button-2",
      "component": "Button",
      "size": "sm",
      "text": "+ New",
      "variant": "primary"
    },
    {
      "id": "column-3",
      "component": "Column",
      "data-actions": "",
      "children": [
        "button-2"
      ]
    },
    {
      "id": "admin-topbar-2",
      "component": "AdminTopbar",
      "children": [
        "button",
        "breadcrumb",
        "text-4",
        "column-3"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "variant": "display",
      "textContent": "Dashboard"
    },
    {
      "id": "column-4",
      "component": "Column",
      "children": [
        "text-5"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column-4"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "section"
      ]
    },
    {
      "id": "text-6",
      "component": "Text",
      "variant": "body",
      "textContent": "Welcome back. Here's what's happening today."
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "card",
        "text-6"
      ]
    },
    {
      "id": "admin-page-header",
      "component": "AdminPageHeader",
      "children": [
        "header"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "variant": "body",
      "textContent": "Page content goes here."
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "text-7"
      ]
    },
    {
      "id": "admin-page-body",
      "component": "AdminPageBody",
      "children": [
        "section-2"
      ]
    },
    {
      "id": "admin-page",
      "component": "AdminPage",
      "children": [
        "admin-page-header",
        "admin-page-body"
      ]
    },
    {
      "id": "admin-scroll",
      "component": "AdminScroll",
      "children": [
        "admin-page"
      ]
    },
    {
      "id": "admin-content",
      "component": "AdminContent",
      "children": [
        "admin-topbar-2",
        "admin-scroll"
      ]
    },
    {
      "id": "root",
      "component": "AdminShell",
      "children": [
        "demo-standard",
        "admin-content"
      ]
    }
  ]
}