Tree

Hierarchical expandable list with APG tree keyboard behavior. Compose nested Tree.Items or pass a recursive items array; control expand/selection with expandedKeys / selectedKeys.

Examples

Default

A small file tree with one folder expanded.

import { Tree } from '@var-ui/react';

<Tree
  aria-label="Files"
  defaultExpandedKeys={['src']}
  items={[{ id: 'src', label: 'src', children: [{ id: 'app', label: 'App.tsx' }] }]}
/>

Expanded selection

Seed nested expansion with defaultExpandedKeys and highlight a leaf via selectionMode + defaultSelectedKeys.

import { Tree } from '@var-ui/react';

<Tree
  aria-label="Project files"
  selectionMode="single"
  defaultExpandedKeys={['src', 'components']}
  defaultSelectedKeys={['button']}
  items={[
    {
      id: 'src',
      label: 'src',
      children: [
        {
          id: 'components',
          label: 'components',
          children: [{ id: 'button', label: 'Button.tsx' }],
        },
      ],
    },
  ]}
/>

Props

Accessibility

Root uses role="tree"; nodes are treeitem with aria-level, aria-expanded, and optional aria-selected. Provide an aria-label (or labelled-by) on the tree. Arrow keys move focus (roving tabindex); Left/Right collapse/expand; Space/Enter select when selectionMode is not "none".