> ## 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.

# Footer section — site-wide footer with brand and nav links

> The Footer section renders the global footer with brand name, tagline, contact email, copyright text, and navigation links. Typically shared via site.json.

The `footer` section renders your site's global footer. It displays a brand name, an optional tagline, an optional contact email address, copyright text, and a list of footer navigation links. Like the [Header](/reference/sections/header), the footer is typically authored once in `site.json` and shared across all pages via a `$ref`.

## Data fields

<ParamField body="brandText" type="string" required>
  The brand or site name displayed in the footer — for example `"Inkwell"`. Rendered as the footer's primary wordmark.
</ParamField>

<ParamField body="tagline" type="string">
  Optional short phrase rendered beneath the brand name — for example `"Notes on the craft of making software."`. Supports a slightly longer value than a heading.
</ParamField>

<ParamField body="email" type="string">
  Optional contact email address rendered as a `mailto:` link — for example `"hello@inkwell-journal.example"`. Omit to hide the email row.
</ParamField>

<ParamField body="copyright" type="string" required>
  Copyright notice rendered at the bottom of the footer — for example `"© 2026 Inkwell Journal. Written slowly, shipped quietly."`.
</ParamField>

<ParamField body="menu" type="FooterMenuItem[]">
  Optional array of footer navigation links. Each item has the following fields:

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

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

    <ParamField body="href" type="string" required>
      The URL or path the link navigates to — for example `"/privacy"`.
    </ParamField>
  </Expandable>
</ParamField>

## Settings fields

<ParamField body="showLogo" type="boolean">
  When `true`, renders a logo mark alongside the `brandText`. When `false` (default), only the text wordmark is shown.
</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-footer",
  "type": "footer",
  "data": {
    "brandText": "Inkwell",
    "tagline": "Notes on the craft of making software. An OlonJS demo showing collections and cross-collection relations.",
    "email": "hello@inkwell-journal.example",
    "copyright": "© 2026 Inkwell Journal. Written slowly, shipped quietly.",
    "menu": [
      { "id": "footer-privacy", "label": "Privacy", "href": "/privacy" },
      { "id": "footer-terms",   "label": "Terms",   "href": "/terms" },
      { "id": "footer-rss",     "label": "RSS",     "href": "/feed.xml" }
    ]
  },
  "settings": {
    "showLogo": true
  }
}
```

When shared via `site.json`, reference it from each page's `sections` array:

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

## Typical page usage

The `footer` section should appear as the **last section** in every page's `sections` array. Define it once in `src/data/config/site.json` and reference it from each page with a `$ref` — identical to the pattern used for the [Header](/reference/sections/header). A single edit in Studio updates the footer everywhere.


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