The Auto-Menu · How Hydrogen Writes Its Own Navigation · Lund Studio
LUND-INV-195 · Applied to Navigation

The Auto-Menu.

How the studio stopped manually editing navigation forever. The menu is the data. Every page appears automatically. Zero admin work.

10,141
Pages auto-indexed
18
Categories
0
Manual nav edits
60s
New page to live
The Problem

Shopify navigation requires a human click for every link.

For 10,151 pages, that is infeasible by design. Every time a new page is added to the theme, someone has to open Shopify admin → Online Store → Navigation → Add menu item → type the label → paste the URL → save. The interface has no bulk import. The admin has no API-level navigation abstraction for a catalog of this size.

The prior studio workflow treated nav maintenance as a background chore. The consequence: new pages went live without appearing in the menu. The menu drifted from the content. The sitemap became unreliable. Search indexing lagged.

The Inversion

The menu IS the data.

In the Hydrogen scaffold, there is no navigation database. There is no admin menu management UI. The navigation is derived at request time from content.json — the same manifest that drives the page renderer.

A new page = a new entry in content.json (the extraction pipeline handles this). The classifier assigns it a category. The menu loader reads the manifest and groups by category. The Header component renders the result. The sitemap-auto route renders the full hierarchical index.

The consequence: adding a new page and having it appear in the menu are the same operation. Not two separate workflow steps. One.

The anatomy of auto-navigation.

YGGDRASIL v21.0.0 (Liquid theme)
     │
     │ extract.py → classify → categorize
     ↓
content.json + classifier rules  ← slug + title + category
     │
     │ app/lib/menu.ts (loadMenu)
     ↓
MenuStructure
     │   featured[]
     │   groups[]: 37 categories
     │     └── pages[]: sorted alphabetically
     │
     ↓
app/components/Header.tsx  ← reads menu from rootData
     │   primary nav: 6 featured links
     │   mega-menu: 37 categories × featured top-5
     │   "All 10,141 Pages" link
     │
     ↓
/pages/sitemap-auto  ← full hierarchical index
     │
     ↓
Browser renders automatic menu
     10,141 pages, 0 manual edits
Write a new page
Either edit templates/page.new-thing.liquid directly, or have Clauder author it under constitutional constraint (LUND-INV-195 / LUND-INV-200).
Run extract.py
The extractor walks the theme, reads the new template, pulls slug + title + meta description, and runs the classifier. The classifier's first pattern match determines the page's category.
Git commit
Commit the updated data/content.json and sharded artifacts. The commit triggers downstream automation.
Oxygen rebuilds
Shopify Oxygen's GitHub integration detects the commit, pulls the updated code, and deploys globally. Rebuild time: ~30 seconds.
The menu already includes it
The next visitor sees the new page in the mega-menu under its category. The sitemap-auto route shows it. Search engines index it within the day. No manual navigation work was required at any point in the chain.
See It Live

Navigate the auto-generated menu.

The sitemap-auto page below is generated from the same manifest that powers Hydrogen. All 10,141 pages are indexed, organized, and browsable. No admin work produced this page.

View the Complete Sitemap → The Hydrogen Frame
The menu is not a separate thing from the pages. The menu is the pages, organized, rendered, automatic.
— LUND-INV-195 · The Autonomous Content Pipeline
Lundr AI Online
Welcome to the grove. I'm Lundr AI — I can help you learn about our services, pricing, process, or answer any questions about working with Lund Studio. What can I help with?
Lundr AI Fact Checker
Available exclusively to Lundr network city operators.
Not an operator? Reach out to Carter about joining the Lundr network.

Send Carter a message directly through the studio contact form.

Open Contact Form →

Or email directly: lundstudio.co/pages/contact

Sound
Ai