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

# Edit the header and footer

> Globals render on every page. One anchor makes a field editable.

The header and footer read from `globals`, rows keyed by name. They are not page components, so `stagePath` does not apply. Use `stageRef`.

The `footer` global:

```json theme={null}
{ "tagline": "Made in Auckland", "email": "hello@example.com", "cta_label": "Start a project", "cta_href": "/contact/" }
```

`src/components/global/Footer.astro`:

```astro theme={null}
---
import { stageRef } from "../../lib/stage-anchors";
const { globals } = Astro.props;
const footer = globals?.footer ?? {};
const ref = (path: string) => stageRef({ kind: "global", key: "footer", path });
---

<footer class="border-t border-border px-6 py-16">
  <p class="text-lg text-foreground" {...ref("tagline")}>{footer.tagline}</p>
  <a href={`mailto:${footer.email}`} class="text-muted" {...ref("email")}>{footer.email}</a>
  <a href={footer.cta_href} class="mt-8 inline-block rounded-full bg-foreground px-5 py-2 text-background" {...ref("cta_label")}>
    {footer.cta_label}
  </a>
</footer>
```

`key` is the global's name. `path` is the field inside it. Edits save to the one row, last write wins. The same anchors work in the header.

Why a different anchor: `stagePath` addresses a component on the current page's row. A global is its own row, shown on every page. `stageRef` names that row, so an edit made on any page lands in the one place, and every other page shows it on the next build.

## Limits

* **The row must exist.** Globals are created when the site is set up, so the header and footer are already there. A new global is a request.
* **Single fields only.** Lists inside a global, such as navigation links, are editable item by item once anchored, but not addable from the admin.
* **Same value everywhere.** Content that differs per page belongs on the page.

## Next steps

<CardGroup cols={2}>
  <Card title="Shared content" href="/developers/editing/components#shared-content">
    The full reference-anchor contract.
  </Card>

  <Card title="Data model" href="/developers/reference/data-model">
    Where globals sit among the tables.
  </Card>
</CardGroup>