TreeView

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

Composition

Use the following composition to build a TreeView:


TreeView
├── TreeViewItem
└── TreeViewItem
    ├── TreeViewItem (leaf)
    └── TreeViewItem
        └── TreeViewItem (leaf)

Props

Export	Key props	Description
`TreeView`	`children`, `className`	Root tree container.
`TreeViewItem`	`label`, `icon`, `expandIcon`, `collapseIcon`, `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-io/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>
  )
}

Custom expand / collapse icons

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

import { TreeView, TreeViewItem } from '@murasaki-io/react98'
 
/** A right-pointing triangle shown on collapsed branches. */
function ExpandTriangle(): React.ReactElement {
  return (
    <svg aria-hidden="true" viewBox="0 0 7 7" width="7" height="7" shapeRendering="crispEdges" fill="currentColor">
      <path d="M1 0h1v7H1zM2 1h1v5H2zM3 2h1v3H3zM4 3h1v1H4z" />
    </svg>
  )
}
 
/** A down-pointing triangle shown on expanded branches. */
function CollapseTriangle(): React.ReactElement {
  return (
    <svg aria-hidden="true" viewBox="0 0 7 7" width="7" height="7" shapeRendering="crispEdges" fill="currentColor">
      <path d="M0 1h7v1H0zM1 2h5v1H1zM2 3h3v1H2zM3 4h1v1H3z" />
    </svg>
  )
}
 
export function TreeViewCustomIconDemo(): React.ReactElement {
  return (
    <TreeView className="h-44 w-72 shadow-(--shadow-border-field)">
      <TreeViewItem
        label="Desktop"
        defaultExpanded
        expandIcon={<ExpandTriangle />}
        collapseIcon={<CollapseTriangle />}
      >
        <TreeViewItem label="My Computer" selected />
        <TreeViewItem label="Network Neighborhood" />
        <TreeViewItem
          label="Control Panel"
          defaultExpanded
          expandIcon={<ExpandTriangle />}
          collapseIcon={<CollapseTriangle />}
        >
          <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.