← →

Tree View

Tree View displays hierarchical data as an accessible tree (role=tree/treeitem), with arrow-key navigation, roving tabindex, expand/collapse, and selection. Use it for file navigation, nested categories, or any parent/child structure. It's agent-native: every node carries data-pura-* and ARIA attributes, and a global window.__puraTrees registry exposes a serializable snapshot of the structure via __puraTrees.snapshot(id) and __puraTrees.list(), letting agents read the tree without traversing the DOM.

Preview

<pura-tree-view id="arvore" label="Documents">
  <pura-tree-item expanded>
    <span slot="label">Projects</span>
    <pura-tree-item selectable value="site">
      <span slot="label">marketing-site</span>
    </pura-tree-item>
    <pura-tree-item selectable value="api">
      <span slot="label">payments-api</span>
    </pura-tree-item>
  </pura-tree-item>
  <pura-tree-item>
    <span slot="label">Archived</span>
    <pura-tree-item selectable value="legado" disabled>
      <span slot="label">legacy-system</span>
    </pura-tree-item>
  </pura-tree-item>
</pura-tree-view>

<script type="module">
  import "/pura/lib/tree-view.js";
  const arvore = document.getElementById("arvore");
  arvore.addEventListener("select", (e) => {
    console.log("Selected:", e.detail.value);
  });
  // Agent-native: serializable snapshot of the structure
  // window.__puraTrees.snapshot("arvore");
</script>

Attributes

Attribute	Type	Default	Description
`label`	string	Tree	On <pura-tree-view>/<pura-tree>: accessible name of the tree (aria-label). On <pura-tree-item>: text label used as a fallback for value and in the snapshot.
`expanded`	boolean	false	On <pura-tree-item>: reveals the group of nested children (rotates the chevron).
`selectable`	boolean	false	On <pura-tree-item>: makes the row selectable (toggles aria-selected on activation).
`selected`	boolean	false	On <pura-tree-item>: marks the node as selected.
`disabled`	boolean	false	On <pura-tree-item>: disables the node (ignored in navigation and clicks).
`value`	string	label/textContent	On <pura-tree-item>: machine-readable id exposed in events and in the agent-native snapshot; if absent, falls back to the label or the node's text.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/tree-view.js"></script>

JavaScript

import "./pura/lib/tree-view.js";

Slots

labeldefault

Events

selectexpandcollapseactivate