{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "sidebar",
  "name": "Sidebar",
  "category": "Navigation",
  "description": "Vertical application navigation with groups, icons and badges.",
  "tags": [
    "sidebar",
    "side nav",
    "menu",
    "navigation",
    "drawer menu"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "app sidebar",
      "side navigation",
      "admin menu",
      "docs navigation"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/sidebar",
  "markdownUrl": "https://mian.ro/ai/components/sidebar.md",
  "classes": [
    {
      "name": "mn-sidebar",
      "description": "On a <nav>."
    },
    {
      "name": "mn-sidebar-group · mn-sidebar-heading · mn-sidebar-link",
      "description": "Parts. aria-current=\"page\" marks the active link."
    }
  ],
  "accessibility": [
    "Give the <nav> an aria-label. Group headings are text; if they collapse, use <details>."
  ],
  "examples": [
    {
      "title": "App sidebar",
      "description": null,
      "html": "<nav class=\"mn-sidebar\" aria-label=\"App\" style=\"max-width:15rem\">\n  <div class=\"mn-sidebar-group\">\n    <a class=\"mn-sidebar-link\" href=\"#sidebar\" aria-current=\"page\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 11 12 3l9 8\"/><path d=\"M5 10v10h14V10\"/></svg> Dashboard</a>\n    <a class=\"mn-sidebar-link\" href=\"#sidebar\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 13h5l1.5 2h5L16 13h5\"/><path d=\"M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Z\"/></svg> Inbox <span class=\"mn-badge mn-badge-sm\">4</span></a>\n    <a class=\"mn-sidebar-link\" href=\"#sidebar\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 20V10M10 20V4M16 20v-7M22 20H2\"/></svg> Reports</a>\n  </div>\n  <div class=\"mn-sidebar-group\">\n    <div class=\"mn-sidebar-heading\">Workspace</div>\n    <a class=\"mn-sidebar-link\" href=\"#sidebar\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"8\" r=\"3.5\"/><path d=\"M2.5 20a6.5 6.5 0 0 1 13 0\"/><path d=\"M16 4.5a3.5 3.5 0 0 1 0 7M18 13.5a6.5 6.5 0 0 1 3.5 6.5\"/></svg> Team</a>\n    <a class=\"mn-sidebar-link\" href=\"#sidebar\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z\"/></svg> Settings</a>\n  </div>\n</nav>"
    }
  ],
  "css": ".mn-sidebar { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; font-size: var(--mn-text-sm); }\n.mn-sidebar-group { display: flex; flex-direction: column; gap: 1px; }\n.mn-sidebar-heading { padding: 0 .65rem .35rem; font-size: .75rem; font-weight: 600; color: var(--mn-muted); letter-spacing: .01em; }\n.mn-sidebar-link {\n  display: flex; align-items: center; gap: .6rem;\n  min-height: 2.1rem; padding: .35rem .65rem;\n  border-radius: var(--mn-radius-field);\n  color: var(--mn-muted); text-decoration: none; font-weight: 450;\n}\n.mn-sidebar-link:hover { color: var(--mn-fg); background: var(--mn-hover); }\n.mn-sidebar-link[aria-current=\"page\"] { color: var(--mn-fg); background: var(--mn-active); font-weight: 550; }\n.mn-sidebar-link:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); }\n.mn-sidebar-link svg { width: 1rem; height: 1rem; flex: none; }\n.mn-sidebar-link .mn-badge { margin-inline-start: auto; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/sidebar.json"
  }
}