Tree View
A tree view is a list that shows containment: any row can hold more rows, the indent says which rows belong to which parent, and a disclosure toggle opens or closes a branch in place. Orvain's Tree View family has two of them, a parameter tree for schema-shaped data, with tone-coded type pills, required markers and a detail card that edits the row it hangs from, and a stepped search thread where a travelling segment on the connector line marks whichever item you are on.
Indentation is the whole mechanism, and it stops carrying meaning at around four levels: past that a reader can see a row without being able to name its parent. A connector spine buys back a level or two, since a lit elbow ties a deep row to the branch it came from even when a long open subtree separates the two on screen. It is also why the entire row should be the hit target. A chevron on its own is a small target for the one action the component exists to perform.
Parameter tree
Best for
Schema editors, nested settings, request builders, recursive parameter panels
Anatomy
A full-row toggle with tone-coded type pills · spine and elbow connectors that light up the open branch · an opened detail card whose Required switch drives the row's own marker · ghost-label enum values
Search thread
Best for
Related searches, suggestion threads, a conversation's branches, any list where one item is the one you are on
Anatomy
A stepped connector line down the side · seven searches with their key words boxed · a brand segment that travels the line to whichever row is picked
Using Tree View
Reach for it when
- Data whose nesting is the point, such as a request schema where one field is an object of fields.
- Settings split into sections that hold their own rows, worked one branch at a time.
- A list where one item is the current one and its relation to the rest matters.
- Cases where a parent and a grandchild have to be visible at the same moment.
Reach for something else when
- Flat records people filter and sort. A table with grouping shows the same sets without the extra level of indirection.
- A deep store people navigate rather than survey. A breadcrumb trail plus one level at a time keeps position legible at depth.
- Folding used only to shorten a long page. An accordion does that without claiming the sections contain one another.
Where it shows up
Schema editor
An API console where a request body is assembled field by field. Types read at a glance, required and optional are visible without opening anything, and a nested object expands under its parent rather than in a second pane.
Permission scopes
Roles built out of grouped scopes, where granting a parent implies its children. The tree makes that implication visible, which a flat checklist of forty scope names never manages.
Category browser
A taxonomy picker in a catalogue admin, where the same category name sits under two different parents and only the path through the tree tells them apart.
Related searches
A suggestion thread beside a result list. Each step narrows the one above it, and the marked segment says which search produced what is currently on screen.
Questions
How should keyboard navigation work in a tree view?
Up and down move between visible rows. Right opens a closed branch and then steps into it; left closes an open branch and otherwise jumps to the parent. Home and End go to the first and last visible row. The tree takes a single tab stop in the page, with focus moving inside it by arrow key rather than by Tab.
Should the whole row toggle a branch, or only the chevron?
Make the row the toggle. The chevron is a small target for the action people perform most often, and a row that responds only at its left edge feels broken. The exception is a tree whose rows already carry a primary action, such as opening a file: there the chevron keeps the toggle and the rest of the row does its own job.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPTree View
A tree view is a list that shows containment: any row can hold more rows, the indent says which rows belong to which parent, and a disclosure toggle opens or closes a branch in place. Orvain's Tree View family has two of them, a parameter tree for schema-shaped data, with tone-coded type pills, required markers and a detail card that edits the row it hangs from, and a stepped search thread where a travelling segment on the connector line marks whichever item you are on.
Indentation is the whole mechanism, and it stops carrying meaning at around four levels: past that a reader can see a row without being able to name its parent. A connector spine buys back a level or two, since a lit elbow ties a deep row to the branch it came from even when a long open subtree separates the two on screen. It is also why the entire row should be the hit target. A chevron on its own is a small target for the one action the component exists to perform.
Parameter tree
Best for
Schema editors, nested settings, request builders, recursive parameter panels
Anatomy
A full-row toggle with tone-coded type pills · spine and elbow connectors that light up the open branch · an opened detail card whose Required switch drives the row's own marker · ghost-label enum values
Search thread
Best for
Related searches, suggestion threads, a conversation's branches, any list where one item is the one you are on
Anatomy
A stepped connector line down the side · seven searches with their key words boxed · a brand segment that travels the line to whichever row is picked
Using Tree View
Reach for it when
- Data whose nesting is the point, such as a request schema where one field is an object of fields.
- Settings split into sections that hold their own rows, worked one branch at a time.
- A list where one item is the current one and its relation to the rest matters.
- Cases where a parent and a grandchild have to be visible at the same moment.
Reach for something else when
- Flat records people filter and sort. A table with grouping shows the same sets without the extra level of indirection.
- A deep store people navigate rather than survey. A breadcrumb trail plus one level at a time keeps position legible at depth.
- Folding used only to shorten a long page. An accordion does that without claiming the sections contain one another.
Where it shows up
Schema editor
An API console where a request body is assembled field by field. Types read at a glance, required and optional are visible without opening anything, and a nested object expands under its parent rather than in a second pane.
Permission scopes
Roles built out of grouped scopes, where granting a parent implies its children. The tree makes that implication visible, which a flat checklist of forty scope names never manages.
Category browser
A taxonomy picker in a catalogue admin, where the same category name sits under two different parents and only the path through the tree tells them apart.
Related searches
A suggestion thread beside a result list. Each step narrows the one above it, and the marked segment says which search produced what is currently on screen.
Questions
How should keyboard navigation work in a tree view?
Up and down move between visible rows. Right opens a closed branch and then steps into it; left closes an open branch and otherwise jumps to the parent. Home and End go to the first and last visible row. The tree takes a single tab stop in the page, with focus moving inside it by arrow key rather than by Tab.
Should the whole row toggle a branch, or only the chevron?
Make the row the toggle. The chevron is a small target for the action people perform most often, and a row that responds only at its left edge feels broken. The exception is a tree whose rows already carry a primary action, such as opening a file: there the chevron keeps the toggle and the rest of the row does its own job.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
