Knowledge · Guidelines · sveltekit

Section Browse Navigation

Define the Section-Browse Navigation pattern — anchor-based sidebar navigation with FeatureSection previews, deep pages, and self-filtering blocks

Metadata

sveltekit sveltekit required

Procedures

  1. 1 Apply pattern to a new page area
    1. Nav-tree fixture: L1 hrefs as /{area}#{section}, L2 as /{area}/{section}#{category}
2. Root page: Hero + FeatureSections per L1 with domain cards + "View All"
3. Deep page: Section headers per L2 with full content grids, anchored
4. Detail page: BackButton(fallbackHref, label) — reads ?section
5. Layout: pass $page.url.pathname + $page.url.hash to ContentSidebar
  2. 2 Create domain-specific preview card
    App-local component. Receives section data from loader.
Links to deep page: /{area}/{section}#{category}
Shows preview content (truncated items, counts, badges).
Whole card is clickable <a>.
  3. 3 Add self-filtering block for cross-page reuse (future)
    Receives full dataset + filter props. Filters client-side.
Wraps in FeatureSection. Auto-hides when empty.
Drop on any page in one line.