--- title: "Tree view UI: anatomy, variants and examples | Kombai" description: "A tree is a nested list where items hold other items, and each branch opens and closes to show what is inside." canonical_url: https://kombai.com/glossary/tree/ author: "The Kombai Team" --- # 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 Kombai gallery: [50 web designs](https://kombai.com/gallery/web/tree/) - [Kestrel](https://kombai.com/gallery/inspirations/tree-web-8/) (Web) - [Bindery](https://kombai.com/gallery/inspirations/tree-web-16/) (Web) - [Draftline](https://kombai.com/gallery/inspirations/tree-web-28/) (Web) ## 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. ## When to use tree - **Real hierarchies.** Folders and files, pages inside pages, accounts inside categories. - **Moving around a big structure.** A docs site or a workspace with more pages than a flat menu can hold. - **Editing structure.** Layers in a builder or nodes in a sitemap that people reorder and nest. ## When not to use one - **Flat lists.** If nothing nests, a stacked list is simpler. - **A single level of sections.** Headers that open panels of text are an accordion. - **Small screens.** Deep indentation runs out of room on a phone. Show one level per screen. ## Anatomy 1. **Parent node**: Holds children 2. **Toggle**: Chevron, open or closed 3. **Child node**: Indented one level 4. **End node**: No children 5. **Guide line**: Shows the depth 6. **States**: Closed, open, selected, focus ## Variants We sorted every tree design in the Kombai gallery and found five patterns. ### 1. Sidebar page trees The most common. Workspaces, folders and pages nested in the left sidebar, with the current page highlighted. - [Foliant](https://kombai.com/gallery/inspirations/tree-web-33/) (Web) - [Junco](https://kombai.com/gallery/inspirations/tree-web-36/) (Web) - [Mirador](https://kombai.com/gallery/inspirations/tree-web-37/) (Web) ### 2. Tree tables Rows that open to show child rows, with columns of data alongside, like spend categories down to each payee. - [Halyard](https://kombai.com/gallery/inspirations/tree-web-14/) (Web) - [Almanac](https://kombai.com/gallery/inspirations/tree-web-6/) (Web) - [Jotwell](https://kombai.com/gallery/inspirations/tree-web-35/) (Web) ### 3. Layer trees Builders list every section, column and element on the page, nested the way they sit on the canvas. - [Plinth](https://kombai.com/gallery/inspirations/tree-web-40/) (Web) - [Ondra](https://kombai.com/gallery/inspirations/tree-web-41/) (Web) - [Lathe](https://kombai.com/gallery/inspirations/tree-web-21/) (Web) ### 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. - [Bonus payouts](https://kombai.com/gallery/inspirations/tree-web-49/) (Web) - [Sonora Studio](https://kombai.com/gallery/inspirations/tree-web-13/) (Web) - [Larkspur](https://kombai.com/gallery/inspirations/tree-web-38/) (Web) ### 5. Outlines and structure editors Nested bullets in notes, and sitemap editors where nodes are dragged, nested and expanded all at once. - [Cairn](https://kombai.com/gallery/inspirations/tree-web-25/) (Web) - [Quorum](https://kombai.com/gallery/inspirations/tree-web-45/) (Web) - [Kelvin Notebooks](https://kombai.com/gallery/inspirations/tree-web-17/) (Web) ## 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. - [Fernwick](https://kombai.com/gallery/inspirations/tree-web-5/) (Web) - [Craftwell](https://kombai.com/gallery/inspirations/tree-web-11/) (Web) - [Auralis Community](https://kombai.com/gallery/inspirations/tree-web-20/) (Web) ### Workspaces and libraries Projects, spaces and media libraries in work tools, each branch holding the files and pages inside it. - [Harborview Redesign](https://kombai.com/gallery/inspirations/tree-web-34/) (Web) - [Reelstack](https://kombai.com/gallery/inspirations/tree-web-43/) (Web) - [Clarion](https://kombai.com/gallery/inspirations/tree-web-26/) (Web) ## Tree vs similar components | | [Tree](https://kombai.com/glossary/tree/) | [Accordion](https://kombai.com/glossary/accordion/) | [Side navigation](https://kombai.com/glossary/side-navigation/) | [Table](https://kombai.com/glossary/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 - [Accordion](https://kombai.com/glossary/accordion/) - [Side navigation](https://kombai.com/glossary/side-navigation/) - [Breadcrumb](https://kombai.com/glossary/breadcrumb/) - [Context menu](https://kombai.com/glossary/context-menu/) ## References - [WAI-ARIA Authoring Practices: Tree view pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) - [WAI-ARIA Authoring Practices: File directory tree view example](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-1a/)