Simple

Introducing adaptive navigation

Prime your readers for how the sticky sidebar maps across desktop, tablet, and mobile breakpoints while keeping core navigation affordances consistent.

Adaptive navigation keeps contextual information within thumb reach. The sidebar collapses into a sheet on mobile while maintaining section affordances for assistive technology.

Sticky ScrollArea on desktop with motion-optimized focus states.
Sheet-based table of contents on mobile with accordion groupings.
Smooth scrolling behaviour with reduced-motion fallbacks.

Remember the offset

Use scroll margin utilities (`scroll-mt-24`) so headings are not obscured by sticky headers across inbound links.

Supporting resources

Designing progressive disclosure in docs
Playbook for layering content without sacrificing scannability.
Component usage checklist

Desktop behaviour

On large screens, the sidebar stays visible and highlights the current section using the scrollspy observer.

Pair the sticky sidebar with concise labels. Keep hierarchy shallow—we recommend at most two levels to prevent overwhelming the reader.

Readers should never lose track of where they are, even in 5,000+ word guides.— Docs leadership principles

Mobile contents drawer

On mobile the contents collapse into a sheet so thumb reach stays ergonomic.

The sheet uses accordion groupings for H2/H3 sections. Keep trigger labels short and describe the outcome, not the implementation detail.

Tap the floating Contents button.
Navigate through collapsible sections.
Auto-scroll transitions respecting prefers-reduced-motion.

Managing versioned content

Communicate release metadata in the right rail so readers can trust what they are seeing.

The utility column houses version, escalation, and escalation actions. Pair badges with tonal callouts to emphasise release state.

Draft mode

If the article is in draft, expose escalation paths immediately so stakeholders can request publication.

Tracking feedback

Collect feedback inline so the team can capture qualitative signals tied to each release.

Feedback actions trigger forms or chat integrations. Keep them in the utility column for predictable placement across the library.

Handoff to support

Escalation links should jump directly into runbooks or on-call workflows.

Use semantic link text—"Open non-critical escalation" is better than "Click here"—and reinforce with helper copy.

Include channel availability windows.
Display expected first-response time.
Provide alt contacts for after-hours incidents.

Supporting resources

Escalation SOP template

Measuring reading progress

Surface a mobile-first progress indicator tied to viewport entry so readers know what is left.

The floating progress bar anchors to the bottom of small screens. Keep it lightweight and complementary to the sticky navigation.

tsx

useEffect(() => {
  const handleScroll = () => {
    const completion = Math.min(1, window.scrollY / (bodyHeight - window.innerHeight));
    setProgress(Math.round(completion * 100));
  };
  window.addEventListener("scroll", handleScroll, { passive: true });
  return () => window.removeEventListener("scroll", handleScroll);
}, []);