Tree View

An accessible tree navigation component for hierarchical data. Features full keyboard navigation, expand/collapse functionality, and optional multi-select.

Basic Usage

Navigate through hierarchical data with keyboard controls.

src

import { useState } from 'react';
import { AccessibleTreeView } from '@a13y/react';

const items = [
  {
    id: '1',
    label: 'Documents',
    children: [
      { id: '1-1', label: 'Report.pdf' },
      { id: '1-2', label: 'Presentation.pptx' }
    ]
  },
  {
    id: '2',
    label: 'Images',
    children: [
      { id: '2-1', label: 'Photo1.jpg' },
      { id: '2-2', label: 'Photo2.jpg' }
    ]
  }
];

function Example() {
  const [selected, setSelected] = useState<string[]>([]);

  return (
    <AccessibleTreeView
      items={items}
      selectedIds={selected}
      onSelectionChange={setSelected}
    />
  );
}

TreeView Props

Name	Type	Default	Description
`items*`	`TreeNode[]`	-	Array of tree node items
`selectedIds*`	`string[]`	-	Array of currently selected node IDs
`onSelectionChange*`	`(ids: string[]) => void`	-	Callback fired when selection changes
`multiSelect`	`boolean`	`false`	Allow multiple node selection
`defaultExpandedIds`	`string[]`	-	IDs of nodes that should be expanded by default
`className`	`string`	-	Optional CSS class

TreeNode Props

Name	Type	Default	Description
`id*`	`string`	-	Unique identifier for the tree node
`label*`	`string`	-	Display text for the node
`children`	`TreeNode[]`	-	Child nodes (creates an expandable branch)

Keyboard Navigation

↓Move to next node

↑Move to previous node

→Expand node

←Collapse node or move to parent

HomeMove to first node

EndMove to last visible node

SpaceSelect/deselect node

EnterActivate node

Accessibility Features

✓Uses role="tree" and role="treeitem"
✓aria-expanded indicates expand/collapse state
✓Full keyboard navigation with arrow keys, Home, End
✓Proper nesting and hierarchy communicated to screen readers
✓Multi-select support with Shift and Ctrl/Cmd keys