Skip to content
DisclosureBrowse disclosure components
ComponentsDisclosureNew in 0.2

Tree

Hierarchical list with dashed connectors. For file explorers and outlines.

Live preview

  • ▸ src
    • index.ts
    • components.ts
  • README.md

Usage

Adapters:React stableVue stable
index.html
<ul class="lm-tree" role="tree">
  <li role="treeitem"><div class="lm-tree-item">src</div></li>
</ul>

CSS classes (2)

ClassDescription
lm-treeRoot <ul>
lm-tree-itemEach row; aria-selected for active

React props (1)

PropTypeDefaultDescription
dataTreeNode[]

Accessibility

  • Use role='tree' / 'treeitem' / 'group'.
  • Arrow keys: ←/→ collapse/expand, ↑/↓ move focus.

Spotted something wrong? Edit this entry on GitHub.