Drill‑Down Navigation
Progressive disclosure for complex recipe workflows — guide users from overview to detail without losing context.
The Problem
Recipes often span multiple configuration steps — ingredient selection, parameter tuning, scheduling. A flat form overwhelms users. A wizard traps them. Drill‑down offers a middle path: each section expands in place, preserving the surrounding structure.
Anatomy
Summary Row
Collapsed card showing key metrics — name, status, last run.
Expanded Panel
Inline detail with tabs, code snippets, or parameter grids.
Breadcrumb Trail
Persistent path indicator so users never feel lost.
When to Use
- •Hierarchical data with 3+ levels of depth
- •Users need to compare sibling items without navigating away
- •Workflows where context retention reduces cognitive load
Implementation Notes
Use CSS grid with grid-template-rows: auto 1fr for smooth expand/collapse transitions. Maintain a flat state object keyed by node ID — avoid nested reducers. For deeply nested recipes, consider virtualizing the list to keep paint times under 16ms.
Next pattern
Recipe State Machines →