Tree View

◆UI Components◆Intermediate🎯Free Tools

Introduction

A Tree View displays hierarchical data with expandable/collapsible nodes. Common uses: file explorers, navigation menus, organizational charts, and category browsers. A well-built tree supports keyboard navigation, ARIA semantics, and efficient rendering.

Basic Tree View

TreeView.tsx

TypeScript

1	"use client";
2	import { useState } from "react";
3
4	interface TreeNode {
5	id: string;
6	label: string;
7	children?: TreeNode[];
8	icon?: string;
9	}
10
11	function TreeView({ data }: { data: TreeNode[] }) {
12	return (
13	<div role="tree" aria-label="File explorer" className="font-mono text-sm">
14	{data.map((node) => (
15	<TreeNodeComponent key={node.id} node={node} depth={0} />
16	))}
17	</div>
18	);
19	}
20
21	function TreeNodeComponent({ node, depth }: { node: TreeNode; depth: number }) {
22	const [expanded, setExpanded] = useState(false);
23	const hasChildren = node.children && node.children.length > 0;
24
25	return (
26	<div role="treeitem" aria-expanded={hasChildren ? expanded : undefined} aria-level={depth + 1}>
27	<div
28	className="flex items-center gap-2 px-2 py-1 hover:bg-white/5 cursor-pointer"
29	style={{ paddingLeft: `${depth * 16 + 8}px` }}
30	onClick={() => hasChildren && setExpanded(!expanded)}
31	onKeyDown={(e) => {
32	if (e.key === "Enter" \|\| e.key === " ") {
33	e.preventDefault();
34	hasChildren && setExpanded(!expanded);
35	}
36	}}
37	tabIndex={0}
38	>
39	{hasChildren ? (
40	<span className="text-[#525252] w-4">{expanded ? "▼" : "▶"}</span>
41	) : (
42	<span className="w-4" />
43	)}
44	{node.icon && <span>{node.icon}</span>}
45	<span className="text-[#E0E0E0]">{node.label}</span>
46	</div>
47	{expanded && hasChildren && (
48	<div role="group">
49	{node.children!.map((child) => (
50	<TreeNodeComponent key={child.id} node={child} depth={depth + 1} />
51	))}
52	</div>
53	)}
54	</div>
55	);
56	}

Keyboard Navigation

tree-keyboard.ts

TypeScript

1	// WAI-ARIA Tree View keyboard patterns
2	// ArrowDown/Up: move between visible nodes
3	// ArrowRight: expand node or move to first child
4	// ArrowLeft: collapse node or move to parent
5	// Home: move to first node
6	// End: move to last visible node
7	// Enter/Space: select/toggle node
8
9	function useTreeKeyboard(flatNodes: HTMLElement[]) {
10	const handleKeyDown = (e: React.KeyboardEvent) => {
11	const currentIndex = flatNodes.indexOf(e.target as HTMLElement);
12
13	switch (e.key) {
14	case "ArrowDown":
15	e.preventDefault();
16	flatNodes[currentIndex + 1]?.focus();
17	break;
18	case "ArrowUp":
19	e.preventDefault();
20	flatNodes[currentIndex - 1]?.focus();
21	break;
22	case "ArrowRight":
23	e.preventDefault();
24	const child = (e.target as HTMLElement).querySelector('[role="treeitem"]');
25	if (child) child.focus();
26	break;
27	case "ArrowLeft":
28	e.preventDefault();
29	const parent = (e.target as HTMLElement).closest('[role="group"]')?.previousElementSibling as HTMLElement;
30	if (parent) parent.focus();
31	break;
32	case "Home":
33	e.preventDefault();
34	flatNodes[0]?.focus();
35	break;
36	case "End":
37	e.preventDefault();
38	flatNodes[flatNodes.length - 1]?.focus();
39	break;
40	}
41	};
42	return handleKeyDown;
43	}

ℹ

info

All tree view interactions must be accessible via keyboard. The WAI-ARIA Tree View pattern defines exactly which keys should do what. Follow the pattern for screen reader compatibility.

$Blueprint — Engineering Documentation·Section ID: UI-TV-01·Revision: 1.0

X GitHub YouTube Instagram Facebook Discord Telegram Buy me a coffee Sponsor