UI Component LabNavigation
Tree view
A nested list, like folders in a file manager, whose branches can be opened and closed.
Demo
- Documents
- Pictures
- readme.txt
Also known as
- Tree view — Carbon Design System
- Tree — Ant Design
How to recognize it
Items indented by level, with a triangle or folder icon on items that have children. Opening one shows its children indented below it.
Behavior
- Clicking a folder opens or closes it. Clicking a file opens it.
- The whole tree is a single Tab stop; the arrow keys move between visible items.
- This demo leaves out two APG keys: jumping by typing and * to open all siblings.
Keyboard
| Key | Action |
|---|---|
| ↑ / ↓ | Moves to the previous or next visible item. |
| → | Opens a closed folder; on an open folder, moves to its first child. |
| ← | Closes an open folder; on a child, moves to its parent. |
| Home / End | Moves to the first or last visible item. |
| Enter | Opens a file, or opens or closes a folder. |
Usage notes
- Use it for real hierarchies such as folders or categories. For a few sections of content, an accordion is simpler.
Similar components
- Accordion: A tree view opens nested items in several levels; an accordion opens sections of content in one level.
Sources
- WAI-ARIA APG: Tree View Pattern (Last checked: )
- Carbon Design System: Tree view (Last checked: )