{
  "name": "nav-menu-icons",
  "kind": "block",
  "primary": "col-ui",
  "page": "/catalog/ui-patterns/v050-nav-blocks/v050-nav-blocks.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "gap": "1"
  },
  "html": "<col-ui gap=\"1\">\n          <button-ui icon=\"house\" text=\"Home\" variant=\"ghost\"></button-ui>\n          <button-ui icon=\"chart-bar\" text=\"Dashboard\" variant=\"ghost\"></button-ui>\n          <button-ui icon=\"users\" text=\"Members\" variant=\"ghost\"></button-ui>\n          <button-ui icon=\"gear\" text=\"Settings\" variant=\"ghost\"></button-ui>\n        </col-ui>",
  "source": "catalog/ui-patterns/v050-nav-blocks/v050-nav-blocks.contents.html",
  "metadata": {
    "domain": "navigation",
    "description": "Navigation menu where each item has a leading icon — icon-ui paired with a label inside nav-item-ui buttons, arranged vertically in an admin sidebar for primary route navigation.",
    "keywords": [
      "navigation",
      "menu",
      "icons",
      "nav-item-ui",
      "icon",
      "nav-ui",
      "sidebar",
      "admin",
      "icon-leading",
      "button-ui",
      "ghost",
      "icon-text",
      "vertical",
      "primary-nav"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "button",
      "component": "Button",
      "icon": "house",
      "text": "Home",
      "variant": "ghost"
    },
    {
      "id": "button-2",
      "component": "Button",
      "icon": "chart-bar",
      "text": "Dashboard",
      "variant": "ghost"
    },
    {
      "id": "button-3",
      "component": "Button",
      "icon": "users",
      "text": "Members",
      "variant": "ghost"
    },
    {
      "id": "button-4",
      "component": "Button",
      "icon": "gear",
      "text": "Settings",
      "variant": "ghost"
    },
    {
      "id": "root",
      "component": "Column",
      "gap": "1",
      "children": [
        "button",
        "button-2",
        "button-3",
        "button-4"
      ]
    }
  ]
}