{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "navbar",
  "name": "Navbar",
  "category": "Navigation",
  "description": "A top bar with brand, links and actions. Sticky and translucent; collapses behind a menu button on small screens.",
  "tags": [
    "navbar",
    "header",
    "top bar",
    "app bar",
    "navigation"
  ],
  "requiresJs": true,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "app top bar",
      "navigation bar",
      "sticky header"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "site-header"
    ],
    "avoid": null
  },
  "url": "https://mian.ro/components/navbar",
  "markdownUrl": "https://mian.ro/ai/components/navbar.md",
  "classes": [
    {
      "name": "mn-navbar",
      "description": "Bar."
    },
    {
      "name": "mn-navbar-sticky · mn-navbar-collapse",
      "description": "Stick to top · collapse links on mobile."
    },
    {
      "name": "mn-navbar-brand · mn-navbar-nav · mn-navbar-link · mn-navbar-end",
      "description": "Parts."
    },
    {
      "name": "mn-navbar-toggle",
      "description": "Mobile menu button; mian.js toggles it."
    }
  ],
  "accessibility": [
    "Wrap links in <nav aria-label>. Mark the current page with aria-current=\"page\". The toggle updates aria-expanded."
  ],
  "examples": [
    {
      "title": "Responsive",
      "description": null,
      "html": "<header class=\"mn-navbar mn-navbar-collapse\" style=\"border:1px solid var(--mn-border);border-radius:var(--mn-radius-box)\">\n  <a class=\"mn-navbar-brand\" href=\"#navbar\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m12 3 9 5-9 5-9-5Z\"/><path d=\"m3 13 9 5 9-5\"/></svg> Acme</a>\n  <nav aria-label=\"Main\"><ul class=\"mn-navbar-nav\">\n    <li><a class=\"mn-navbar-link\" href=\"#navbar\" aria-current=\"page\">Dashboard</a></li>\n    <li><a class=\"mn-navbar-link\" href=\"#navbar\">Projects</a></li>\n    <li><a class=\"mn-navbar-link\" href=\"#navbar\">Team</a></li>\n  </ul></nav>\n  <div class=\"mn-navbar-end\">\n    <button class=\"mn-btn mn-btn-ghost mn-btn-icon\" aria-label=\"Notifications\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/><path d=\"M10.3 21a1.9 1.9 0 0 0 3.4 0\"/></svg></button>\n    <span class=\"mn-avatar mn-avatar-sm mn-primary\">AP</span>\n    <button class=\"mn-btn mn-btn-ghost mn-btn-icon mn-navbar-toggle\" aria-label=\"Menu\" aria-expanded=\"false\"><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 7h16M4 12h16M4 17h16\"/></svg></button>\n  </div>\n</header>"
    }
  ],
  "css": ".mn-navbar {\n  display: flex; align-items: center; gap: 1rem;\n  min-height: 3.75rem; padding: .5rem 1rem;\n  border-bottom: var(--mn-border-w) solid var(--mn-border);\n  background: color-mix(in srgb, var(--mn-bg) 85%, transparent);\n  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\n  font-size: var(--mn-text-sm);\n}\n.mn-navbar-sticky { position: sticky; top: 0; z-index: 40; }\n.mn-navbar-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1rem; color: var(--mn-fg); text-decoration: none; white-space: nowrap; }\n.mn-navbar-brand svg { width: 1.4rem; height: 1.4rem; }\n.mn-navbar-nav { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }\n.mn-navbar-link { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 .75rem; border-radius: var(--mn-radius-field); color: var(--mn-muted); text-decoration: none; font-weight: 500; }\n.mn-navbar-link:hover { color: var(--mn-fg); background: var(--mn-hover); }\n.mn-navbar-link[aria-current=\"page\"] { color: var(--mn-fg); }\n.mn-navbar-link:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-navbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; }\n.mn-navbar-toggle { display: none; }\n@media (max-width: 48rem) {\n  .mn-navbar-collapse .mn-navbar-nav { display: none; }\n  .mn-navbar-collapse .mn-navbar-toggle { display: inline-flex; }\n  .mn-navbar-collapse[data-open] { flex-wrap: wrap; }\n  .mn-navbar-collapse[data-open] .mn-navbar-nav { display: flex; flex-direction: column; align-items: stretch; order: 10; width: 100%; padding-top: .5rem; }",
  "js": "document.addEventListener('click', (e) => {\n  const t = e.target.closest('.mn-navbar-toggle');\n  if (!t) return;\n  const nav = t.closest('.mn-navbar');\n  const open = !nav.hasAttribute('data-open');\n  nav.toggleAttribute('data-open', open);\n  t.setAttribute('aria-expanded', String(open));\n});",
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": "https://mian.ro/dist/mian.js",
    "registryItem": "https://mian.ro/r/navbar.json"
  }
}