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. Fumadocs already knows how to do this well, but it needs a real page tree to work with.
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 now maps to real Fumadocs root folders instead of a custom wrapper. 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 cool right-side animation is mostly a content depth problem, not a missing framework feature. Once pages have enough headings and subheadings, the stock Fumadocs TOC tracking does the right thing and becomes visible again.
TOC behavior comes from page depth
We do not need to reimplement the right rail animation. We need to keep giving Fumadocs enough heading structure to let its built-in TOC shine.