.png?fit=max&auto=format&n=AyzhRn9-CO-nDNc4&q=85&s=63c78e2325701880237e6cbce1399c2a)
.png?fit=max&auto=format&n=AyzhRn9-CO-nDNc4&q=85&s=0db283df6e4d31745079d6d03fd029ed)
header section renders your site’s global navigation bar. It displays a text logo (with an optional highlighted word), an optional announcement banner above the nav, and a list of menu links — one of which can be styled as a primary call-to-action button.
Because the header appears on every page, you typically author it once in site.json and reference it from each page using a $ref pointer. OlonJS resolves the reference before the section reaches the component, so you always see a fully expanded object in Studio.
Data fields
string
required
The full logo text displayed in the top-left of the navigation bar — for example
"Inkwell". Rendered as a styled wordmark linking to /.string
Optional word within
logoText to render in the brand accent color. For example, if logoText is "Inkwell" and logoHighlight is "journal", the word “journal” receives the accent treatment. The value should exactly match a word inside logoText.string
Optional short text displayed in a slim announcement bar above the navigation row — for example
"Collections demo: posts and tags, linked both ways". Omit this field to hide the bar entirely.Array of navigation links rendered in the header menu. Each item has the following fields:
Settings fields
boolean
When
true, the navigation bar sticks to the top of the viewport as the user scrolls. Defaults to false when omitted."none" | "sm" | "md" | "lg" | "xl"
Vertical padding applied above the section.
"none" | "sm" | "md" | "lg" | "xl"
Vertical padding applied below the section.
JSON example
When authored inline in a page file:site.json and shared across pages, reference it from each page’s sections array:
$ref to the full header object before passing it to the component.
Typical page usage
Theheader section should appear as the first section in every page’s sections array. To avoid duplicating header data across page files, define it once under a header key in src/data/config/site.json and reference it from each page with a $ref. Studio shows the resolved object and lets you edit it in place.