{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "dock",
  "name": "Dock",
  "category": "Navigation",
  "description": "A bottom navigation bar for mobile apps and compact layouts, floating or in the page.",
  "tags": [
    "dock",
    "bottom navigation",
    "tab bar",
    "mobile nav",
    "app bar"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "bottom navigation",
      "mobile tab bar",
      "app dock"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/dock",
  "markdownUrl": "https://mian.ro/ai/components/dock.md",
  "classes": [
    {
      "name": "mn-dock",
      "description": "The bar (a <nav>)."
    },
    {
      "name": "mn-dock-item",
      "description": "A link or button with an icon and a label; aria-current=\"page\" marks the current one."
    },
    {
      "name": "mn-dock-fixed",
      "description": "Float it at the bottom of the viewport."
    },
    {
      "name": "mn-dock-compact",
      "description": "Icons only (keep aria-labels)."
    }
  ],
  "accessibility": [
    "Use <nav aria-label=\"…\">. Keep visible labels where you can; with mn-dock-compact every item needs an aria-label.",
    "Targets are at least 48 × 48 px."
  ],
  "examples": [
    {
      "title": "Dock",
      "description": null,
      "html": "<nav class=\"mn-dock\" aria-label=\"App\" style=\"max-width:26rem;margin:auto\">\n  <a class=\"mn-dock-item\" href=\"#\" 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><span>Home</span></a>\n  <a class=\"mn-dock-item\" href=\"#\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m20 20-3.5-3.5\"/></svg><span>Search</span></a>\n  <a class=\"mn-dock-item\" href=\"#\"><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><span>Inbox</span></a>\n  <a class=\"mn-dock-item\" href=\"#\"><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=\"8\" r=\"4\"/><path d=\"M4 21a8 8 0 0 1 16 0\"/></svg><span>Profile</span></a>\n</nav>"
    }
  ],
  "css": ".mn-dock {\n  display: flex; align-items: stretch; justify-content: space-around; gap: .25rem;\n  padding: .35rem; max-width: 100%;\n  border: var(--mn-border-w) solid var(--mn-border); border-radius: calc(var(--mn-radius-box) + 4px);\n  background: color-mix(in srgb, var(--mn-surface) 88%, transparent);\n  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);\n  box-shadow: var(--mn-shadow-md);\n}\n.mn-dock-fixed { position: fixed; z-index: 40; left: 50%; bottom: max(.75rem, env(safe-area-inset-bottom)); translate: -50% 0; width: min(28rem, calc(100vw - 1.5rem)); }\n.mn-dock-item {\n  display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;\n  min-width: 3rem; min-height: 3rem; padding: .35rem .5rem;\n  border: 0; border-radius: var(--mn-radius-box); background: none;\n  color: var(--mn-muted); font: 500 .6875rem/1 var(--mn-font); text-decoration: none; cursor: pointer;\n  transition: color var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease);\n}\n.mn-dock-item svg { width: 1.25rem; height: 1.25rem; }\n.mn-dock-item:hover { color: var(--mn-fg); background: var(--mn-hover); }\n.mn-dock-item[aria-current=\"page\"] { color: var(--mn-primary-text); }\n.mn-dock-item[aria-current=\"page\"] svg { transform: translateY(-1px); }\n.mn-dock-item:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-dock-compact .mn-dock-item > span { display: none; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/dock.json"
  }
}