Indented Tree
The classic outline view — every child is nudged rightward under its parent, turning a hierarchy into a scannable, expandable list that feels as natural as a file browser.
// 01 — The chart
What it looks like
An indented tree showing a project’s file structure. Depth equals nesting level; the highlighted file (Home.tsx) shows an annotation badge.
// 02 — Definition
What is an indented tree?
An indented tree (also called a tree list, outline view, or collapsible list) is the most familiar hierarchy visualization in everyday computing. Every file browser, table of contents, and settings menu you’ve ever used is an indented tree.
The idea is simple: each level of depth is offset horizontally from its parent by a fixed amount of indentation. Children sit directly beneath their parent, shifted to the right. This turns any tree-shaped dataset into a scannable vertical list that requires no legend, no axis, and no learning curve.
Because indented trees map depth to horizontal offset, they are remarkably space-efficient for narrow hierarchies (few levels). But they struggle with deeply nested or very wide trees, where either horizontal scrolling or excessive vertical length makes the structure hard to follow.
Fun fact: The indented-tree pattern predates computers. Book indexes and legal outlines have used indentation to show hierarchy for centuries. The digital tree view widget appeared in Apple’s Finder in 1984 and has been a UI staple ever since.
// 03 — Anatomy
Parts of an indented tree
// 04 — Usage
When to use it — and when not to
- Users need to drill into specific branches while keeping the overall structure visible
- The hierarchy is relatively shallow (3–5 levels) with many siblings per level
- Node labels are text-heavy and need to be readable (file names, menu items, topics)
- You want a familiar, zero-learning-curve interface — everyone knows file trees
- You need expandable/collapsible interaction so users control their own depth
- Showing the full path from root to any leaf matters (breadcrumb context)
- The hierarchy has more than 6–7 nesting levels — indentation pushes content off-screen
- You need to compare branch sizes or quantities — use a treemap instead
- The dataset has thousands of leaf nodes — scrolling becomes unmanageable
- Relationships are not strictly parent-child (e.g., a network) — use a graph layout
- You want a compact overview of the whole tree at once — use a radial tree or sunburst
- The audience is non-technical and won’t understand expand/collapse conventions
// 05 — Reading guide
How to read an indented tree
Most people already read these intuitively, but here is the deliberate process.
Start at the root
The topmost, leftmost item is the root of the tree. It has no parent and represents the broadest category.
Read indentation as depth
Every rightward shift means one level deeper in the hierarchy. Items at the same indentation level are siblings.
Look for toggle icons
Arrows, plus/minus signs, or triangles indicate branches that can be expanded or collapsed. A closed toggle hides child nodes.
Follow connector lines
Vertical and L-shaped lines trace the path from parent to children. They help you track which nodes belong to which branch when the tree is tall.
Scan for leaf nodes
Items with no toggle or children are leaves — the terminal endpoints of the hierarchy. These often carry the most specific data.
// 06 — Pitfalls
Common mistakes
Too much nesting depth
Fix: Cap indentation at 4–5 levels. If deeper structure is needed, consider a sunburst or radial tree.
No connector lines in deep trees
Fix: Without guide lines, users lose track of parent-child relationships. Always add them for trees deeper than 2 levels.
All nodes expanded by default
Fix: Start with only the top level or two expanded. Let users drill down by choice to avoid information overload.
Inconsistent indentation width
Fix: Keep the indent step uniform (e.g., 24 px per level). Varying widths create visual confusion about depth.
No visual distinction between branches and leaves
Fix: Use folder/file icons, bold text, or toggle arrows to help users distinguish expandable branches from terminal leaves.
// 07 — In the wild
Real-world examples
File explorers (Finder, Windows Explorer, VS Code sidebar)
Every code editor and operating system uses an indented tree to let users navigate the file system.
Table of contents in documentation
API docs, wikis, and help centers render section hierarchies as collapsible indented lists.
Comment threads (Reddit, Hacker News)
Threaded replies are indented beneath their parent comment, forming a discussion tree.
E-commerce category navigation
Product catalogs indent sub-categories under parent categories in sidebar filters.
XML/JSON viewers
Developer tools render nested data structures as indented, collapsible trees.
// 08 — At a glance
Quick reference
| Also known as | Tree list, outline view, collapsible list, file tree |
| Category | Hierarchy |
| Typical data | Nested categories, file systems, org trees, taxonomies |
| Visual encoding | Horizontal indentation for depth, vertical position for order |
| Best for | Browsing and drilling into moderately deep hierarchies |
| Interaction | Expand/collapse branches; search & filter |
| Accessibility | Excellent — screen readers handle tree roles natively |
// 09 — Variations
Variations
Collapsible tree list
The standard interactive version with expand/collapse toggles on every branch.
Flat indented list
A fully-expanded, non-interactive version used in printed documents and static reports.
Checkbox tree
Each node has a checkbox for multi-select. Used in permission editors and category pickers.
Tree table (tree grid)
Combines an indented tree with a data grid — each row has additional columns (size, date, status).
// 10 — FAQs
Frequently asked questions
What is an indented tree?+
An indented tree (also called a tree list, outline view, or collapsible list) is the most familiar hierarchy visualization in everyday computing. Every file browser, table of contents, and settings menu you've ever used is an indented tree.
When should you use an indented tree?+
Use an indented tree when users need to drill into specific branches while keeping the overall structure visible. It also works well when the hierarchy is relatively shallow (3–5 levels) with many siblings per level, and when node labels are text-heavy and need to be readable (file names, menu items, topics).
When should you avoid an indented tree?+
Avoid an indented tree when the hierarchy has more than 6–7 nesting levels — indentation pushes content off-screen. It is also a poor fit when you need to compare branch sizes or quantities — use a treemap instead, or when the dataset has thousands of leaf nodes — scrolling becomes unmanageable.
Is an indented tree suitable for dashboards?+
Yes — an indented tree can work well in dashboards as long as the panel is large enough for readers to perceive the encoded values, has a clear title, and includes the legend or axis labels needed to interpret it.
What category of chart is an indented tree?+
Indented Tree belongs to the Hierarchy family of charts. Charts in that family are designed to answer the same kind of question, so they often work as alternatives when one doesn't quite fit your data.
How do you read an indented tree?+
Start with the axis labels and legend, then look at the overall shape before zooming into individual marks. Compare prominent features against the rest of the data, and verify any conclusion against the underlying numbers when precision matters.