> ## Documentation Index
> Fetch the complete documentation index at: https://docs.olonjs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Header section — global navigation bar with logo and menu

> The Header section renders the site-wide nav bar with a text logo, optional announcement text, and menu links. One item can be styled as a CTA button.

The `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

<ParamField body="logoText" type="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 `/`.
</ParamField>

<ParamField body="logoHighlight" type="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`.
</ParamField>

<ParamField body="announcement" type="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.
</ParamField>

<ParamField body="menu" type="HeaderMenuItem[]">
  Array of navigation links rendered in the header menu. Each item has the following fields:

  <Expandable title="HeaderMenuItem fields">
    <ParamField body="id" type="string" required>
      A unique identifier for this menu item — for example `"nav-blog"`. Used as the React key.
    </ParamField>

    <ParamField body="label" type="string" required>
      The visible link text — for example `"Blog"` or `"About"`.
    </ParamField>

    <ParamField body="href" type="string" required>
      The URL or path the link navigates to — for example `"/blog"` or `"https://github.com/you/repo"`.
    </ParamField>

    <ParamField body="isCta" type="boolean">
      When `true`, this menu item renders as a primary CTA button rather than a plain text link. Use it for the most important action in the navigation — for example a "Get started" button. Defaults to `false` when omitted.
    </ParamField>
  </Expandable>
</ParamField>

## Settings fields

<ParamField body="sticky" type="boolean">
  When `true`, the navigation bar sticks to the top of the viewport as the user scrolls. Defaults to `false` when omitted.
</ParamField>

<ParamField body="paddingTop" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied above the section.
</ParamField>

<ParamField body="paddingBottom" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied below the section.
</ParamField>

## JSON example

When authored inline in a page file:

```json theme={null}
{
  "id": "global-header",
  "type": "header",
  "data": {
    "logoText": "Inkwell",
    "logoHighlight": "journal",
    "announcement": "Collections demo: posts and tags, linked both ways",
    "menu": [
      { "id": "nav-posts",  "label": "Posts",  "href": "/posts" },
      { "id": "nav-tags",   "label": "Topics", "href": "/tags" },
      { "id": "nav-about",  "label": "About",  "href": "/about" },
      { "id": "nav-cta",    "label": "Get started", "href": "/start", "isCta": true }
    ]
  },
  "settings": {
    "sticky": true
  }
}
```

When the header is defined in `site.json` and shared across pages, reference it from each page's `sections` array:

```json theme={null}
{
  "$ref": "../site.json#/header"
}
```

OlonJS resolves the `$ref` to the full header object before passing it to the component.

## Typical page usage

The `header` 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.