Tree

A tree is a nested list where items hold other items, and each branch opens and closes to show what is inside.

Also called: tree view, file tree
Platforms: Web
In the gallery: 50 web designs

Trees from the Kombai gallery: an accounting tool's chart of accounts, a team wiki's page tree and a web builder's element navigator.

What is a tree?

A tree, or tree view, is a list of items nested inside other items. A parent shows a small arrow that opens or closes its branch, and its children sit indented below it, so people can see where each item lives and open only the part they need.

Indentation shows depth, and a chevron or triangle shows whether a branch is open.
Any item can hold more items, to any depth.

Trees show up across code editor, project tracker, dashboard and resources screens.

When to use a tree

Real hierarchiesFolders and files, pages inside pages, accounts inside categories.
Moving around a big structureA docs site or a workspace with more pages than a flat menu can hold.
Editing structureLayers in a builder or nodes in a sitemap that people reorder and nest.

When not to use one

Flat listsIf nothing nests, a stacked list is simpler.
A single level of sectionsHeaders that open panels of text are an accordion.
Small screensDeep indentation runs out of room on a phone. Show one level per screen.

Anatomy of a tree

This one works. Click a folder to open it, or tab in and use the arrow keys: Right opens, Left closes, Up and Down move.

Project files

Docs
- Getting started
  - Install.md
  - First project.md
- Guides
- Changelog.md
Assets
README.md

Selected: Docs / Getting started / Install.md

Closed
Open
Selected
Keyboard focus

Parent nodeHolds children
ToggleChevron, open or closed
Child nodeIndented one level
End nodeNo children
Guide lineShows the depth
StatesClosed, open, selected, focus

Tree variants

We sorted every tree design in the Kombai gallery and found five patterns. Browse all 50 web designs.

1. Sidebar page trees

The most common. Workspaces, folders and pages nested in the left sidebar, with the current page highlighted.

2. Tree tables

Rows that open to show child rows, with columns of data alongside, like spend categories down to each payee.

3. Layer trees

Builders list every section, column and element on the page, nested the way they sit on the canvas.

4. Trees in pickers

A tree inside a dialog for choosing a destination or a set of options, like a folder to move into or columns to export.

5. Outlines and structure editors

Nested bullets in notes, and sitemap editors where nodes are dragged, nested and expanded all at once.

Where trees show up

Category filters

Shops, course catalogs and forums nest categories in the sidebar, so people narrow from a department down to one shelf.

Workspaces and libraries

Projects, spaces and media libraries in work tools, each branch holding the files and pages inside it.

Tree vs similar components

Property	Tree	Accordion	Side navigation	Table
Depth	Any number of levels	One level	One or two levels	Flat, or grouped rows
Keyboard	Arrow keys move and open	Tab between headers	Tab between links	Tab through controls
Best for	Files, folders and nested categories	FAQs and long detail	Moving around an app	Comparing records

Build notes

Use role="tree" with a label, role="treeitem" on each node and role="group" around each set of children.
Set aria-expanded on parent nodes only. End nodes leave it off, or they read as parents.
Tab enters the tree once, on the selected node or the first one. Arrow keys move from there.
Right opens a closed node or moves to its first child. Left closes an open node or moves to its parent.
Up and Down move between visible nodes. Home and End jump to the first and last.
Style focus and selection differently, so people can tell where they are from what they picked.

FAQ

What is the difference between a tree and an accordion?

An accordion has one level: headers that open panels of content. A tree nests items inside items to any depth, and each item is something you can select, like a folder or a page. Use a tree for hierarchies and an accordion for sections of text.

Should clicking a parent node open it or select it?

Pick one and keep it the same everywhere. In file browsers the chevron opens and closes while a click on the name selects. In navigation trees the name often goes to the page and the chevron toggles. For the keyboard, the WAI-ARIA guidance lists opening or closing as one possible default action of Enter on a parent node.

How deep should a tree go?

As shallow as the content allows. Every level adds indentation and another click. Past three or four levels, add search or breadcrumbs, or split the tree into sections.

Do trees work on mobile?

Poorly at depth: narrow screens run out of room for indentation, and small chevrons are hard to tap. Mobile apps usually show one level per screen and drill in, with a back button. Every tree design in the Kombai gallery is a web design.

Related terms

All glossary terms · Browse 50 web tree designs