Playground
  • Introduction
  • Components

Multilevel tree

Global navigation connects main pages. Each main page contains subpages visible only after entering that section—typically through sidebars, subtabs, or expanded menus. Subpages connect only among themselves and to their parent page, creating a tree structure.

Common in systems where content has natural categorical divisions. Balances the navigation freedom of fully connected with the structure needed for deep content hierarchies.

Behavioural position

Supports

  • Browsing — structured exploration within known domains
  • Navigating — efficient when mental model matches structure
  • Re-finding — hierarchy provides memory cues

Challenges

  • Uncovering — opaque hierarchy frustrates actors
  • Exploring — hierarchy constrains free exploration
  • Cross-section browsing requires backtracking to top level

The model assumes actors can predict or learn where content lives in the hierarchy. When categorisation is unclear or content fits multiple categories, actors experience friction.

Variants

  • Two-level tree. Global navigation for top level, single level of subnavigation.
  • Deep tree. Multiple levels of nested categories; past a few levels, prefer multiple shallow trees or search-first navigation.
  • Expandable tree. Sidebar or menu shows/hides nested levels.
  • Faceted tree. Multiple independent hierarchies.

Wayfinding states

  • Breadcrumb trail — path from root to current location
  • Section indicator — visual cue of current main section
  • Depth indicator — how deep in hierarchy

Related components

  • Sidebar, dropdown, tabs, breadcrumbs - implementations of multilevel trees.
  • Breadcrumbs — for wayfinding

Resources & references

  • Tidwell, Brewer, Valencia (2020) Designing Interfaces, 3rd ed.
  • Rosenfeld, Morville, Arango (2015) Information Architecture, 4th ed., Chapter 6: Organization Systems

Related patterns

Complements

  • Searching — escape hatch when hierarchy fails
  • Command menu — quick access bypassing hierarchy
  • Deep linking — enables direct access to any node

Alternatives

  • Fully connected
  • Hub and spoke
  • Pan and zoom
  • Pyramid
  • Step by step

Related

  • Information architecture
  • Intent & Interaction — efficient when mental model matches structure
  • Hybrid patterns