Navigation Showcase
How the upgraded page tree, dropdown selector, sidebar subsections, and sticky TOC work together.
The biggest difference between a shallow docs install and a convincing one is navigation structure. DevDocs.dev needs a real page tree that can carry product education, API references, delivery proof, and interface examples without flattening them into one long list.
What changed
| Area | Before | After |
|---|---|---|
| Root switching | No meaningful multi-section selector | Real root folders show up as a section dropdown |
| Sidebar depth | A few flat links | Subsections, separators, nested folders, and better ordering |
| Right rail | Often absent because pages were too thin | Sticky TOC has enough structure to track while you scroll |
Root folders power the section selector
The dropdown selector maps to real root sections. That means each major section has its own active subtree:
- Essentials for the product story and authoring guidance
- Delivery for previews, proof, and domains
- Components for the UI showcase
Sidebar hierarchy
Each root section now has a landing page so the dropdown can take readers somewhere intentional instead of an arbitrary child page.
Nested folders such as Authoring and Delivery give the sidebar more rhythm and help long trees stay understandable.
Emoji-labeled separators make the tree scan faster and echo the friendly, structured feel of the reference docs.
Sticky TOC behavior
The right-side table of contents is mostly a content depth problem, not a decorative problem. Once pages have enough headings and subheadings, the reading system can keep a developer oriented while they scan.
TOC behavior comes from page depth
We do not need to make the right rail clever. We need to keep giving each page enough structure to make the TOC useful.