The footer appears at the bottom of every page and is configurable through the `footer` field passed to `zudoDoc({...})` in `zfb.config.ts`. It supports a multi-column link layout and optional copyright text.

## Configuration

The `footer` field accepts a `FooterConfig` object:

```ts title="zfb.config.ts"
export default defineConfig(
  zudoDoc({
    footer: {
      links: [
        {
          title: "Docs",
          items: [
            { label: "Getting Started", href: "/docs/getting-started" },
            { label: "Guides", href: "/docs/guides" },
          ],
        },
        {
          title: "Community",
          items: [
            { label: "GitHub", href: "https://github.com/zudolab/zudo-doc" },
          ],
        },
      ],
      copyright: `Copyright © ${new Date().getFullYear()} <a href="https://example.com">Your Name</a>. Built with <a href="https://zudo-doc.takazudomodular.com/">zudo-doc</a>.`,
    },
  }),
);
```

### links

An array of columns displayed in the footer. Each column has a `title` and an `items` array of links.

| Property | Type | Description |
|----------|------|-------------|
| `title` | string | Column heading displayed above the links |
| `items` | `FooterLinkItem[]` | Array of link items in the column |

Each item in the `items` array has:

| Property | Type | Description |
|----------|------|-------------|
| `label` | string | Display text for the link |
| `href` | string | URL the link points to |

[Dynamic content unavailable in text export]

External links (URLs starting with `http://` or `https://`) automatically open in a new tab with `rel="noopener noreferrer"`. Internal links are resolved with the site's configured base path.



### copyright

Optional copyright text displayed centered below the link columns. When link columns are present, the copyright is separated from them by a top border. When no links are configured, the copyright displays without a border.

The copyright field supports **HTML content** — you can include `<a>` tags for links. Links in the copyright are automatically styled with `text-accent` color and underlined.

```ts
copyright: `Copyright © ${new Date().getFullYear()} <a href="https://example.com">Your Name</a>. Built with <a href="https://zudo-doc.takazudomodular.com/">zudo-doc</a>.`,
```

## Adding Columns

Add more columns by appending objects to the `links` array. The footer uses a responsive grid — columns stack on small screens and flow horizontally on larger screens.

```ts
footer: {
  links: [
    {
      title: "Docs",
      items: [
        { label: "Getting Started", href: "/docs/getting-started" },
        { label: "Guides", href: "/docs/guides" },
      ],
    },
    {
      title: "Community",
      items: [
        { label: "GitHub", href: "https://github.com/zudolab/zudo-doc" },
        { label: "Discord", href: "https://discord.gg/example" },
      ],
    },
    {
      title: "More",
      items: [
        { label: "Blog", href: "https://example.com/blog" },
        { label: "Changelog", href: "/docs/changelog" },
      ],
    },
  ],
  copyright: `Copyright © ${new Date().getFullYear()} <a href="https://example.com">My Project</a>.`,
},
```

[Dynamic content unavailable in text export]

The grid layout uses `repeat(auto-fit, minmax(12rem, 1fr))` on large screens, so columns will automatically adjust their width based on available space.



## Disabling the Footer

To remove the footer entirely, set `footer` to `false` in `zfb.config.ts`:

```ts
footer: false as FooterConfig | false,
```

When set to `false`, the footer component is not rendered on any page.

## i18n (Localized Labels)

Footer columns and link items support locale-specific overrides via the optional `locales` field. When a page is rendered for a non-default locale, the footer resolves localized titles and labels automatically. Internal link hrefs are also prefixed with the locale path (e.g. `/ja/docs/guides`).

```ts
footer: {
  links: [
    {
      title: "Docs",
      locales: { ja: { title: "ドキュメント" } },
      items: [
        {
          label: "Getting Started",
          href: "/docs/getting-started",
          locales: { ja: { label: "はじめに" } },
        },
        {
          label: "Guides",
          href: "/docs/guides",
          locales: { ja: { label: "ガイド" } },
        },
      ],
    },
  ],
},
```

Each `FooterLinkColumn` accepts an optional `locales` field with per-locale `{ title }` overrides. Each `FooterLinkItem` accepts an optional `locales` field with per-locale `{ label }` overrides. When no locale override exists, the default `title` or `label` is used.

[Dynamic content unavailable in text export]

External links are never locale-prefixed — only internal hrefs (those that don't start with `http://` or `https://`) get the locale prefix.



## TypeScript Types

The footer configuration uses these interfaces, exported from `@takazudo/zudo-doc/settings`:

```ts
interface FooterLinkItem {
  label: string;
  href: string;
  locales?: Record<string, { label: string }>;
}

interface FooterLinkColumn {
  title: string;
  items: FooterLinkItem[];
  locales?: Record<string, { title: string }>;
}

interface FooterConfig {
  links: FooterLinkColumn[];
  copyright?: string;
  taglist?: FooterTaglistConfig;
}
```

The `footer` field on `ZudoDocConfig` is typed as `FooterConfig | false`, allowing it to be either a configuration object or `false` to disable.

`taglist` is an opt-in footer tag index — off by default, and documented separately in the [Footer Taglist guide](https://zudo-doc.takazudomodular.com/docs/guides/footer-taglist).

## Styling

The footer uses the project's design token colors for consistent theming:

- `border-muted` — top border separating the footer from content, and the divider above the copyright
- `bg-surface` — footer background
- `text-fg` — column titles
- `text-muted` — link text and copyright text
- `text-accent` — link hover color

The layout is responsive: a single column on mobile, two columns on small screens, and auto-fit columns on large screens. See `packages/zudo-doc/src/footer/footer.tsx` for implementation details.