Skip to content

feat: docs navigation — breadcrumbs, TOC, prev/next, cross-links, mobile menu - #9

Merged
YairEtzion merged 1 commit into
mainfrom
feat/docs-navigation
Apr 2, 2026
Merged

feat: docs navigation — breadcrumbs, TOC, prev/next, cross-links, mobile menu#9
YairEtzion merged 1 commit into
mainfrom
feat/docs-navigation

Conversation

@YairEtzion

Copy link
Copy Markdown
Contributor

Summary

Complete docs navigation overhaul. Fixes 11 identified pain points from the navigation audit.

5 new components:

  • navigation.ts — centralized nav data (single source of truth for doc pages + use case pages)
  • Breadcrumb.svelte — consistent breadcrumbs on all inner pages (replaces ad-hoc back-links)
  • TableOfContents.svelte — sticky right-rail on desktop (IntersectionObserver active tracking), collapsible on mobile
  • PrevNextNav.svelte — prev/next page cards at bottom of every doc and use case page
  • RelatedContent.svelte — cross-links docs and use cases with "Doc"/"Use Case" type badges

Page improvements:

  • Integration guide: 9 anchor IDs + TOC + breadcrumb + related use cases + next -> self-hosting
  • Self-hosting guide: 7 anchor IDs + TOC + breadcrumb + related docs + prev -> integration
  • UseCasePage: breadcrumb + slug prop + related links + prev/next between use cases
  • Docs index: use case cards section at bottom for cross-section discovery
  • Use cases index: "Ready to integrate?" callout linking to integration guide

Mobile nav:

  • Hamburger menu with Docs, Use Cases (all pages), and GitHub links
  • Auto-closes on navigation

Footer:

  • Dynamic use case links from navigation.ts (add a use case page, it appears everywhere)

Test plan

  • bun run build — all pages prerender
  • Visual: breadcrumbs on integration, self-hosting, microservices, webhooks
  • Visual: TOC on integration (desktop sticky rail, mobile collapsible)
  • Visual: TOC on self-hosting
  • Visual: prev/next cards at bottom of integration (next: self-hosting)
  • Visual: prev/next at bottom of self-hosting (prev: integration)
  • Visual: related content cross-links on all pages
  • Visual: use case cards on docs index
  • Visual: "Ready to integrate?" on use cases index
  • Visual: mobile hamburger menu works
  • Anchor links scroll correctly with nav offset (scroll-mt-20)

…ile menu

5 new components:
- navigation.ts: centralized nav data for docs + use cases
- Breadcrumb.svelte: replaces ad-hoc back-links on all inner pages
- TableOfContents.svelte: sticky right-rail (desktop) + collapsible (mobile) with IntersectionObserver active tracking
- PrevNextNav.svelte: prev/next page cards at bottom of every doc and use case page
- RelatedContent.svelte: cross-links docs <-> use cases with type badges

Integration page: 9 h2 anchor IDs, TOC, breadcrumb, related use cases, next -> self-hosting
Self-hosting page: 7 h2 anchor IDs, TOC, breadcrumb, related integration guide, prev -> integration
UseCasePage: breadcrumb, slug prop, related links, prev/next between use cases
Docs index: use case cards section at bottom for discovery
Use cases index: "Ready to integrate?" callout linking to integration guide
Nav: mobile hamburger menu with docs + use cases + GitHub links
Footer: dynamic use case links from navigation.ts
@YairEtzion
YairEtzion force-pushed the feat/docs-navigation branch from bd46408 to 52fab64 Compare April 2, 2026 17:11
@YairEtzion
YairEtzion merged commit 70e0a7f into main Apr 2, 2026
1 check passed
@YairEtzion
YairEtzion deleted the feat/docs-navigation branch April 2, 2026 17:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant