{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "site-header",
  "name": "Site header",
  "category": "Sections",
  "description": "A website header: brand, navigation, actions, and a menu that works without JavaScript on small screens.",
  "tags": [
    "header",
    "site header",
    "navigation bar",
    "nav",
    "top bar",
    "menu",
    "hamburger",
    "mobile menu",
    "website"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "header",
    "intents": [
      "website navigation",
      "top menu",
      "logo and links",
      "mobile menu",
      "header with call to action"
    ],
    "prominence": "medium",
    "density": "low",
    "worksAfter": [],
    "worksBefore": [
      "hero"
    ],
    "alternatives": [
      "navbar"
    ],
    "avoid": "More than five or six links, or more than one primary button."
  },
  "url": "https://mian.ro/components/site-header",
  "markdownUrl": "https://mian.ro/ai/components/site-header.md",
  "classes": [
    {
      "name": "mn-header",
      "description": "The header. Blurred page colour with a hairline. mn-header-sticky · mn-header-plain (no background) · mn-header-center (centred nav)."
    },
    {
      "name": "mn-header-in",
      "description": "Inner row; put it on the mn-container."
    },
    {
      "name": "mn-header-brand",
      "description": "Logo link (an SVG and a name)."
    },
    {
      "name": "mn-header-nav",
      "description": "Main links, shown when the header is at least 54rem wide. aria-current=\"page\" marks the current one."
    },
    {
      "name": "mn-header-actions",
      "description": "Buttons on the right. mn-header-wide hides an action when the header is narrow."
    },
    {
      "name": "mn-header-menu",
      "description": "A <details> with a <summary> button and mn-header-panel: the small-screen menu. Hidden on wide headers."
    },
    {
      "name": "mn-header-open · mn-header-close",
      "description": "Icons inside the summary for the closed and open state."
    }
  ],
  "accessibility": [
    "Both navs need aria-label (e.g. “Main” and “Menu”). The summary needs an aria-label such as “Menu”.",
    "<details> is a native disclosure: Enter and Space open it, and screen readers announce expanded/collapsed.",
    "Keep the brand link’s accessible name (the visible name or aria-label).",
    "Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview."
  ],
  "examples": [
    {
      "title": "Header",
      "description": null,
      "html": "<header class=\"mn-header\">\n  <div class=\"mn-container mn-header-in\">\n    <a class=\"mn-header-brand\" href=\"#\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"currentColor\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"5\"/><path d=\"M8 7v10h8\" stroke=\"var(--mn-bg)\" stroke-width=\"2.4\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>Ledger</a>\n    <nav class=\"mn-header-nav\" aria-label=\"Main\"><a href=\"#\" aria-current=\"page\">Product</a><a href=\"#\">Customers</a><a href=\"#\">Pricing</a><a href=\"#\">Changelog</a></nav>\n    <div class=\"mn-header-actions\"><a class=\"mn-btn mn-btn-ghost mn-btn-sm mn-header-wide\" href=\"#\">Sign in</a><a class=\"mn-btn mn-btn-sm\" href=\"#\">Start free</a></div>\n    <details class=\"mn-header-menu\"><summary aria-label=\"Menu\"><span class=\"mn-header-open\"><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></span><span class=\"mn-header-close\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg></span></summary>\n      <nav class=\"mn-header-panel\" aria-label=\"Menu\"><a href=\"#\">Product</a><a href=\"#\">Customers</a><a href=\"#\">Pricing</a><a href=\"#\">Changelog</a><a href=\"#\">Sign in</a></nav>\n    </details>\n  </div>\n</header>"
    }
  ],
  "css": ".mn-header {\n  container: mn-header / inline-size; position: relative; z-index: 30;\n  border-bottom: var(--mn-border-w) solid var(--mn-border);\n  background: color-mix(in srgb, var(--mn-bg) 86%, transparent);\n  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);\n}\n.mn-header-sticky { position: sticky; top: 0; }\n.mn-header-plain { border-bottom-color: transparent; }\n.mn-header-plain:not(.mn-header-sticky) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }\n.mn-header-in { display: flex; align-items: center; gap: 1.25rem; min-height: 4rem; }\n.mn-header-brand { display: inline-flex; align-items: center; gap: .55rem; flex: none; color: var(--mn-fg); text-decoration: none; font: 650 1.0625rem/1 var(--mn-font-heading); letter-spacing: -.015em; white-space: nowrap; }\n.mn-header-brand svg { width: 1.6rem; height: 1.6rem; }\n.mn-header-brand:focus-visible { outline: none; box-shadow: var(--mn-focus); border-radius: var(--mn-radius-field); }\n.mn-header-nav { display: none; align-items: center; gap: .15rem; }\n.mn-header-nav a, .mn-header-panel a { color: var(--mn-muted); text-decoration: none; font-weight: 500; }\n.mn-header-nav a { padding: .45rem .7rem; border-radius: var(--mn-radius-field); font-size: .9375rem; transition: color var(--mn-duration) var(--mn-ease); }\n.mn-header-nav a:hover, .mn-header-nav a[aria-current=\"page\"] { color: var(--mn-fg); }\n.mn-header-nav a:focus-visible, .mn-header-panel a:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-header-center .mn-header-nav { margin-inline: auto; }\n.mn-header-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }\n.mn-header-center .mn-header-actions { margin-inline-start: 0; }\n.mn-header-menu { flex: none; }\n.mn-header-menu > summary {\n  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; list-style: none; cursor: pointer;\n  border-radius: var(--mn-radius-field); color: var(--mn-fg);\n}\n.mn-header-menu > summary::-webkit-details-marker { display: none; }\n.mn-header-menu > summary:hover { background: var(--mn-hover); }\n.mn-header-menu > summary:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-header-menu > summary svg { width: 1.25rem; height: 1.25rem; }\n.mn-header-menu > summary .mn-header-close, .mn-header-menu[open] > summary .mn-header-open { display: none; }\n.mn-header-menu[open] > summary .mn-header-close { display: contents; }\n.mn-header-panel {\n  position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 0;\n  padding: .5rem var(--mn-gutter) 1.5rem; max-height: calc(100dvh - 4rem); overflow: auto;\n  border-bottom: var(--mn-border-w) solid var(--mn-border); background: var(--mn-bg); box-shadow: var(--mn-shadow-lg);\n  animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter);\n}\n.mn-header-menu:not([open]) > .mn-header-panel { display: none; }\n.mn-header-panel a { padding: .9rem .25rem; border-bottom: var(--mn-border-w) solid var(--mn-border); font-size: 1.0625rem; color: var(--mn-fg); }\n.mn-header-panel .mn-btn { margin-top: 1rem; }\n@container mn-header (min-width: 54rem) {\n  .mn-header-nav { display: flex; }\n  .mn-header-menu { display: none; }\n  .mn-header-in { gap: 2rem; }\n}\n@container mn-header (max-width: 34rem) { .mn-header-actions .mn-header-wide { display: none; } }\n@container mn-header (max-width: 24rem) {\n  .mn-header-in { gap: .5rem; }\n  .mn-header-brand { gap: .4rem; font-size: .9688rem; }\n  .mn-header-brand svg { width: 1.35rem; height: 1.35rem; }\n  .mn-header-actions { gap: .25rem; }\n  .mn-header-actions .mn-btn:not(.mn-btn-icon) { padding-inline: .75em; }\n  .mn-header-menu > summary { width: 2.25rem; }\n}\n@container mn-header (max-width: 18rem) {\n  .mn-header-in { gap: .35rem; }\n  .mn-header-menu > summary { width: 2rem; }\n  .mn-header-actions .mn-btn:not(.mn-btn-icon) { padding-inline: .6em; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/site-header.json"
  }
}