← All patterns · Navigation widgets

Tree

Hierarchical list of items the user can expand and collapse.

Pattern

A treeview presents nested items, each of which may be expandable. Folders open and close; leaves are activatable. Common in file browsers and outline views.

Roles

  • tree
  • treeitem
  • group

States and properties

aria-expanded
On expandable treeitem; true / false.
aria-selected
On the active treeitem.
aria-level
Required if level can't be inferred from DOM nesting.

Keyboard interaction

Up / Down arrow
Move between visible items.
Right arrow
Expand collapsed node, or move to first child.
Left arrow
Collapse expanded node, or move to parent.
Enter
Activate the focused item.

WCAG criteria

  • 2.1.1 — Keyboard
  • 1.3.1 — Info and Relationships

Canonical reference

WAI-ARIA Authoring Practices Guide — Tree

More