Tree View - Lumora

UI Advanced

Tree View Patterns

Explore structured hierarchical data with a modern, keyboard-friendly tree view. This page includes default nested trees, right-click context actions, checkbox selection trees, and drag & drop folder reordering.

Hierarchical data Tri-state checkboxes Drag & drop

Default Tree Style

Expand and collapse nodes to navigate a nested file-like hierarchy.

Food
- Vegetables
  - Potato
  - Tomato
- Fruits
  - Juice
  - Cakes

Context Menu View

Right-click any node to open context actions (rename, add child, duplicate, delete).

Transportation
- Cars
  - Audi
  - Toyota
  - Ferrari

Checkbox Tree Style

Parent checkboxes automatically become indeterminate based on child selection.

This PC
- Games
  - Dota 2
  - Far Cry
- Documents
  - resume.pdf
  - insurance.xlsx

Drag & Drop Enabled

Drag nodes and drop onto folders to rearrange hierarchy.

Electronics
- Mobile
  - Nokia
  - Samsung
  - OnePlus
- Warranty