Astro Navigation

Astro has no built-in navigation system like Hugo’s [[menus.main]]. Navigation is typically defined in a TypeScript or JSON data file.

Recommended approach: nav.json

Convert your navigation data from TypeScript to JSON so scribe can edit it:

{
  "main": [
    { "label": "News", "href": "/news/", "weight": 1 },
    { "label": "Reviews", "href": "/reviews/", "weight": 2 },
    { "label": "Guides", "href": "/guides/", "weight": 3 }
  ]
}

Save as src/data/nav.json. Import in your nav component:

---
import navData from '../data/nav.json';
---
<nav>
  {navData.main.map(item => (
    <a href={item.href}>{item.label}</a>
  ))}
</nav>

Add src/data as a data edit zone in scribe.yaml:

edit_zones:
  - path: src/data
    label: Data files
    type: data

You can then edit nav.json directly in scribe’s data editor.