Eastbrook Collection Discovery · Prototype Gallery

Deep-hierarchy tree navigation

Prototypes for navigating a 10-level archival finding aid in a narrow sidebar without truncating long titles. Design notes & full spec in DESIGN_NOTES.md.

Recommended navigator

Primary · the live demo Sliding-Indent Tree — with Siblings Ancestors slide left & compress as you go deeper, so the open level keeps full text width. Shows breadth (siblings) at every level. Single path Sliding-Indent Tree The same compress-ancestors mechanic on a single lineage — the clearest view of the core motion.

Alternate interactions

Alternate interaction Scroll-as-Depth Wheel/scroll drives depth — folders open progressively as you scroll down, collapse scrolling up. Open folder stays pinned in view. Interactive set Deep Tree — Interactive Prototypes A set of interactive takes on navigating the deep hierarchy.

Decision aids & rationale

Decision aid Deep Tree — 5 Visual Solutions Side-by-side of five approaches to the trilemma, each annotated with how it wins. Patterns Deep Tree — Navigation Patterns Catalogue of navigation patterns for deep trees. Constraint study Sidebar-Contained Navigation Keeping the whole navigator inside a narrow sidebar. Constraint study Long Names in a Sidebar How long titles behave without truncation. Decision aid Collection Hierarchy — 5 Approaches Five approaches to presenting the collection hierarchy.

Surrounding product & offline build

Full app Library Discovery Home · search results with facets + AI assistant · item detail with citation graph · Collection Discovery lobby. Deep-link a prototype with ?start=coastal-adaptation · wexler-maps · faculty-papers.
Single file · works offline Sliding-Indent Tree — standalone The with-siblings demo with every dependency inlined into one HTML file (no CDN, no build). Save it and open from disk.
These are design references (React via in-browser Babel + CDN). In a production app, recreate them in your real environment and design system rather than shipping the Babel-in-browser setup. Full component specs, tokens, the 10-level mock data, state model, and a11y requirements are in DESIGN_NOTES.md.