TreeView

TreeView renders nested expandable lists with Windows 98 branch markers and roving keyboard focus.

Props

Export	Key props	Description
`TreeView`	`children`, `className`	Root tree container.
`TreeViewItem`	`label`, `icon`, `defaultExpanded`, `expanded`, `onExpandedChange`, `selected`, `preventCollapse`, `disabled`, `onClick`	Leaf or branch item.

Examples

Explorer tree

Desktop
- My Computer
- Network Neighborhood
- Control Panel
  - Display
  - Mouse
Recycle Bin

import { TreeView, TreeViewItem } from '@murasaki/react98'
 
export function TreeViewBasicDemo(): React.ReactElement {
  return (
    <TreeView className="h-44 w-72 shadow-(--shadow-border-field)">
      <TreeViewItem label="Desktop" defaultExpanded>
        <TreeViewItem label="My Computer" selected />
        <TreeViewItem label="Network Neighborhood" />
        <TreeViewItem label="Control Panel" defaultExpanded>
          <TreeViewItem label="Display" />
          <TreeViewItem label="Mouse" />
        </TreeViewItem>
      </TreeViewItem>
      <TreeViewItem label="Recycle Bin" />
    </TreeView>
  )
}

ARIA

TreeView uses role="tree", role="treeitem", role="group", and aria-expanded on branch summaries. Arrow keys move through visible items and expand or collapse branches.

Keyboard

ArrowUp and ArrowDown move focus through visible enabled items without wrapping. ArrowRight expands a collapsed branch or moves into its first child. ArrowLeft collapses an expanded branch or moves focus to the parent. Home and End move to the first and last visible enabled item. Enter and Space activate clickable leaf items.

SSR

Use defaultExpanded for uncontrolled branches. Use controlled expanded when state must be restored from app data.