opinion
TreeView
An expandable list of nested items with selection, as a real ARIA tree.
Project filesArrow keys move, Right expands, Left collapses
Brand
Logos
van-livery-photos.zip
depot-fascia-final.pdf
interview-03-walkthrough.mp4
Brand
depot-fascia-final.pdf
interview-03-walkthrough.mp4
Brand
Logos
mark-stacked.svg
van-livery-photos.zip
depot-fascia-final.pdf
interview-03-walkthrough.mp4
interview-03-walkthrough-transcript-final-reviewed.docx
In context
File browserPick a file, see its details
Harbour rebrand filesBrand, signage and research
Brand
Logos
mark-stacked.svg
van-livery-photos.zip
depot-fascia-final.pdf
interview-03-walkthrough.mp4
mark-stacked.svg
8 KB
Harbour rebrand
Props
| Prop | Type | Required | Default |
|---|---|---|---|
data | TreeNode[] | Yes | — |
selected | string | undefined | No | — |
defaultSelected | string | undefined | No | — |
onSelect | ((value: string) => void) | undefined | No | — |
defaultExpanded | string[] | undefined | No | [] |
aria-label | string | undefined | No | — |
className | string | undefined | No | — |
Accessibility
role="tree" and role="treeitem" with aria-expanded, aria-level and aria-selected. Right expands (or enters the first child), Left collapses (or goes to the parent), Up and Down move through whatever is visible, with real focus moves.
data-rebar-* attributes
data-rebar-component="tree-view"; data-rebar-part="item" per node.
Migrating to Ant Design
A close, low-risk rename: AntD's Tree takes a very similar treeData shape.