Astro Navigation

Astro has no built-in navigation system like Hugo’s [[menus.main]]. In toa://scribe, Astro navigation is managed via a src/data/nav.json file that controls both the top navigation menu and the command palette.

Astro sites typically have two navigation layers that should mirror each other:

Layer	What it is	Where it appears
Top navigation	Main menu links	Navigation bar at top of every page
Command palette	Searchable jump-anywhere	`$ jump anywhere…` overlay (⌘K)

toa://scribe edits both from the same place — the Navigasjon editor in the sidebar.

Setting up nav.json

Create src/data/nav.json in your Astro repo:

{
  "nav": [
    { "label": "reviews", "href": "/reviews/", "keys": "reviews scores" },
    { "label": "news",    "href": "/news/",    "keys": "news posts latest" },
    { "label": "guides",  "href": "/guides/",  "keys": "guides how-to" },
    { "label": "about",   "href": "/about/",   "keys": "about contact" }
  ],
  "palette": [
    {
      "heading": "pages",
      "items": [
        { "label": "about",   "href": "/about/",   "description": "/about/",
          "glyph": "→", "hint": "page", "keys": "about contact" },
        { "label": "contact", "href": "/contact/", "description": "/contact/",
          "glyph": "→", "hint": "page", "keys": "contact email" }
      ]
    }
  ]
}

The nav array controls which links appear in the top navigation bar. Each item has:

Field	Required	Description
`label`	Yes	Link text shown in nav bar
`href`	Yes	URL the link points to
`keys`	No	Search keywords for command palette

palette section — command palette

The palette array controls the command palette sections (⌘K). Each section has a heading and a list of items.

Each palette item has:

Field	Required	Description
`label`	Yes	Display name
`href`	Yes	URL
`description`	No	Shown as subtitle
`glyph`	No	Icon character (e.g. `→`, `://`)
`hint`	No	Right-side label (e.g. `page`, `live`)
`keys`	No	Search keywords
`external`	No	`true` opens in new tab

Importing in your nav component

In your nav component (e.g. src/components/Nav.astro):

import navData from '../data/nav.json';

// Top navigation
const navItems = navData.nav;

// Command palette sections
const paletteSections = navData.palette;

Then render top nav:

{navItems.map(item => (
  <a href={item.href}>{item.label}</a>
))}

Adding to scribe edit zones

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

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

scribe will then show a Navigasjon button in the sidebar for your Astro repo. Clicking it opens the navigation editor with two sections:

Topmeny — edit top navigation links (order, label, URL)
Palette sections — edit command palette sections and items