Skip to main content
OlonJS navigation menus are defined in src/data/config/menu.json. The file exports two menu arrays — main (used by the header navigation) and footer (used by the footer navigation) — each containing an ordered list of link objects. Reorder, add, or remove items here and the change propagates to every page automatically.
The file is a single JSON object with two top-level arrays:
src/data/config/menu.json
The main array drives the header navigation bar. The footer array drives the link row in the global footer. Both arrays are independent — you can include different items, in a different order, in each one.
Each object in a menu array accepts the following fields:
​
string
required
A unique identifier for the menu item. Used internally by OlonJS to key list renders and resolve references. Use a short, kebab-cased string without spaces.
​
string
required
The display text rendered in the navigation. Keep labels short — one or two words work best in horizontal header nav.
​
string
required
The destination URL for the link. Use a root-relative path (e.g. /about) for internal pages, or a full absolute URL (e.g. https://github.com/your-org) for external links.
​
boolean
default:"false"
When true, the header renders this item as a primary CTA button instead of a plain text link. Use it for your most important conversion action — typically a “Sign up”, “Get started”, or “Contact” link.
Only set isCta: true on one item per menu. The header is designed to accommodate a single CTA button; marking multiple items as CTAs will apply primary button styling to all of them and dilute the visual hierarchy.

​
Referencing menus in site.json

The header and footer blocks in src/data/config/site.json reference menus using the JSON Reference ($ref) pattern:
The $ref value is a relative file path followed by a JSON Pointer fragment (#/main or #/footer). At build time, OlonJS resolves the reference and inlines the matching array. This means you maintain menu data in one place — menu.json — and both site.json and any section that references a menu stay in sync automatically.

​
Adding a menu item

To add a new item to the header navigation, append an object to the main array. The example below adds a Newsletter link between “About” and “Contact”:
Save the file and restart your dev server (or trigger a build in production) to see the new item appear in the header.