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

# Site Chrome

Configure header links, CTA buttons, banners, footer columns, and social links in docs.json.

## Header and footer primitives

HolyDocs splits site chrome across three config blocks:

- `navbar` controls header links and the primary CTA.
- `banner` controls the dismissible site-wide announcement bar.
- `footer` controls social icons, link columns, attribution, footer text, and optional raw HTML for trusted badges.

## Navbar

```json
{
  "navbar": {
    "links": [
      { "label": "Pricing", "href": "https://example.com/pricing" },
      { "label": "GitHub", "href": "https://github.com/example/docs", "icon": "github" }
    ],
    "primary": {
      "type": "button",
      "label": "Start Free",
      "href": "https://app.example.com/signup"
    }
  }
}
```

| Field | Type | Notes |
|---|---|---|
| `links[].label` | `string` | Link text shown in the header |
| `links[].href` | `string` | Internal path or external URL |
| `links[].icon` | `string` | Optional icon for scan-heavy links like GitHub or Status |
| `primary.type` | `button` \| `github` | CTA style |
| `primary.label` | `string` | CTA text |
| `primary.href` | `string` | CTA destination |

## Site banner

```json
{
  "banner": {
    "content": "Version 3 is live. Review your upgrade plan before switching readers to the new docs IA.",
    "dismissible": true
  }
}
```

Use the banner for time-bound information: launches, deprecations, maintenance windows, or migrations. Do not use it for evergreen product marketing.

## Footer

```json
{
  "footer": {
    "text": "Copyright 2026 Example Inc.",
    "html": "<a href=\"https://status.example.com\" target=\"_blank\" rel=\"noopener\">System status</a>",
    "poweredBy": true,
    "socials": {
      "github": "https://github.com/example/docs",
      "discord": "https://discord.gg/example"
    },
    "links": [
      {
        "header": "Docs",
        "items": [
          { "label": "Quickstart", "href": "/quickstart" },
          { "label": "API Reference", "href": "/api" }
        ]
      },
      {
        "header": "Company",
        "items": [
          { "label": "Status", "href": "https://status.example.com" },
          { "label": "Support", "href": "mailto:support@example.com" }
        ]
      }
    ]
  }
}
```

| Field | Type | Notes |
|---|---|---|
| `text` | `string` | Short footer copy such as copyright or legal text |
| `html` | `string` | Raw trusted HTML for badges, status links, or compliance snippets |
| `poweredBy` | `boolean` | Set `false` to hide the HolyDocs attribution |
| `socials` | `Record<string, string>` | Platform name to URL mapping |
| `links` | `FooterLinkGroup[]` | Grouped footer columns |

`footer.html` renders raw HTML from your `docs.json`. Use it only for markup you control, such as status badges or verified third-party snippets.

## Chrome design guidance

**Header**

Keep 2-4 links max. The CTA should answer the reader's next step after the docs.
  **Banner**

Reserve for temporary or high-priority messages. If it stays forever, it belongs on a page instead.
  **Footer**

Use footer columns for utility destinations, not duplicates of your full sidebar tree.