Navigation & structure

Tree View

Q: How do people describe a Tree View in plain words?

the expandable folder list like in a file sidebar nested items with little arrows to open and close a hierarchy I can drill into without changing pages

Q: How do I implement a Tree View?

Build an accessible file tree sidebar: role=tree with expand/collapse chevrons, aria-expanded on parents, arrow-key navigation, and lazy-loaded children when a folder opens.

A hierarchical list where nodes expand and collapse to reveal children.

Also known as folder tree · hierarchy list · nested list

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Tree View".

Build an accessible file tree sidebar: role=tree with expand/collapse chevrons, aria-expanded on parents, arrow-key navigation, and lazy-loaded children when a folder opens.

Anatomy:
- node: Label plus optional expand control and icon.
- expander: Chevron that toggles children; reflect aria-expanded.
- child group: Indented group under an expanded parent.

Preferred API / pattern: `custom tree / react-aria Tree / shadcn patterns`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Clicking the row label doesn't expand
○Avoid: No keyboard model
○Avoid: Deep trees load everything up front

In plain wordsHow people search for it

“the expandable folder list like in a file sidebar”“nested items with little arrows to open and close”“a hierarchy I can drill into without changing pages”

AnatomyOpen for part names

node: Label plus optional expand control and icon.
expander: Chevron that toggles children; reflect aria-expanded.
child group: Indented group under an expanded parent.

How to write itOpen for stack patterns

Web (HTML/CSS)role="tree" / treeitem / aria-expanded

React + Tailwind + shadcn/uicustom tree / react-aria Tree / shadcn patterns

SwiftUIList with OutlineGroup / DisclosureGroup

Ant Design<Tree> / <Tree treeData>

Notes

Trees shine for file systems, org charts, and nested settings. Keyboard: arrows expand/collapse and move between nodes. Don't use a tree when a flat filtered list is enough. Lazy-load deep children so first paint stays light.

Common mistakesHumans and models trip here

Clicking the row label doesn't expand: hit target should include chevron and label.
No keyboard model: implement arrow keys per WAI-ARIA tree pattern.
Deep trees load everything up front: lazy-load nodes.

More failure symptoms on AI broke it.

Related patterns

Accordion / CollapseStacked headers that expand and collapse to show nested content.Dropdown MenuA compact menu of actions or options revealed from a trigger control.BreadcrumbA trail of links showing the path from the root to the current page.

Spotted a wrong name or missing pattern?

Message on X