{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "tree",
  "name": "Tree view",
  "category": "Data display",
  "description": "Nested, collapsible lists, file trees, navigation and outlines, built on native <details>.",
  "tags": [
    "tree",
    "tree view",
    "file tree",
    "explorer",
    "outline",
    "nested list",
    "folders"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "file tree",
      "nested navigation",
      "folder structure",
      "outline"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/tree",
  "markdownUrl": "https://mian.ro/ai/components/tree.md",
  "classes": [
    {
      "name": "mn-tree",
      "description": "The root list."
    },
    {
      "name": "details > summary",
      "description": "A collapsible branch."
    },
    {
      "name": "mn-tree-item",
      "description": "A leaf (link or button). aria-current marks the current one."
    }
  ],
  "accessibility": [
    "Branches are native disclosures: Enter/Space toggles, the state is announced. It is not the ARIA tree pattern (no arrow-key tree navigation), which keeps it working without JavaScript.",
    "For file managers that need multi-select and arrow navigation, build the full tree pattern."
  ],
  "examples": [
    {
      "title": "Files",
      "description": null,
      "html": "<ul class=\"mn-tree\" aria-label=\"Project files\" style=\"max-width:18rem\">\n  <li><details open><summary><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 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z\"/></svg> src</summary>\n    <ul>\n      <li><details open><summary><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 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z\"/></svg> components</summary>\n        <ul><li><a class=\"mn-tree-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=\"M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8Z\"/><path d=\"M14 3v5h5\"/></svg> button.mjs</a></li><li><a class=\"mn-tree-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=\"M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8Z\"/><path d=\"M14 3v5h5\"/></svg> calendar.mjs</a></li></ul>\n      </details></li>\n      <li><details><summary><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 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z\"/></svg> noodles</summary><ul><li><a class=\"mn-tree-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=\"M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8Z\"/><path d=\"M14 3v5h5\"/></svg> mian.css</a></li></ul></details></li>\n      <li><a class=\"mn-tree-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=\"M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8Z\"/><path d=\"M14 3v5h5\"/></svg> index.html</a></li>\n    </ul>\n  </details></li>\n  <li><a class=\"mn-tree-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=\"M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8Z\"/><path d=\"M14 3v5h5\"/></svg> README.md</a></li>\n</ul>"
    }
  ],
  "css": ".mn-tree, .mn-tree ul { margin: 0; padding: 0; list-style: none; }\n.mn-tree { font: 400 var(--mn-text-sm)/1.4 var(--mn-font); color: var(--mn-fg); }\n.mn-tree ul { margin-inline-start: .9rem; padding-inline-start: .55rem; border-inline-start: var(--mn-border-w) solid var(--mn-border); }\n.mn-tree summary, .mn-tree-item {\n  display: flex; align-items: center; gap: .45rem; min-height: 1.9rem; padding: .2rem .45rem;\n  border-radius: var(--mn-radius-field); color: inherit; text-decoration: none; cursor: pointer; list-style: none;\n}\n.mn-tree summary::-webkit-details-marker { display: none; }\n.mn-tree summary::before { content: \"\"; width: .4rem; height: .4rem; flex: none; margin-inline: .1rem .15rem; border: solid var(--mn-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--mn-duration) var(--mn-ease); }\n.mn-tree details[open] > summary::before { transform: rotate(45deg); }\n.mn-tree-item { padding-inline-start: 1.25rem; }\n.mn-tree summary:hover, .mn-tree-item:hover { background: var(--mn-hover); }\n.mn-tree summary:focus-visible, .mn-tree-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); }\n.mn-tree-item[aria-current] { background: color-mix(in oklab, var(--mn-primary) 12%, transparent); color: var(--mn-primary-text); font-weight: 550; }\n.mn-tree svg { width: 1rem; height: 1rem; color: var(--mn-muted); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/tree.json"
  }
}