---
title: "Page Methods"
description: "Get frontend URLs, breadcrumb data, and multi-language metadata for navigation and language switchers in headless frontends."
canonical_url: "https://kirby.tools/docs/headless/usage/page-methods"
---

# Page Methods

> Get frontend URLs, breadcrumb data, and multi-language metadata for navigation and language switchers in headless frontends.

## `frontendUrl()`

Returns the frontend URL for a page. This is used in blueprints to configure preview links that point to your frontend application instead of the backend.

See the [Panel Configuration](/docs/headless/configuration/panel) page for setup instructions.

```yaml [site/blueprints/pages/default.yml]
options:
  preview: "{{ page.frontendUrl }}"
```

## `breadcrumbMeta()`

Returns breadcrumb navigation data for the current page. Useful for building breadcrumb navigation in your frontend.

### Usage

```ts
import type { KirbyQuerySchema } from "kirby-types";

export const pageQuery: KirbyQuerySchema = {
  query: 'page("blog/article")',
  select: {
    title: true,
    breadcrumbMeta: true,
  },
};
```

### Response

```json
{
  "code": 200,
  "status": "OK",
  "result": {
    "title": "Article Title",
    "breadcrumbMeta": [
      {
        "title": "Blog",
        "uri": "blog"
      },
      {
        "title": "Article Title",
        "uri": "blog/article"
      }
    ]
  }
}
```

## `i18nMeta()`

Returns page metadata for all languages. Essential for building language switchers in multi-language sites.

### Usage

```ts
import type { KirbyQuerySchema } from "kirby-types";

export const pageQuery: KirbyQuerySchema = {
  query: 'page("home")',
  select: {
    title: true,
    i18nMeta: true,
  },
};
```

### Response

```json
{
  "code": 200,
  "status": "OK",
  "result": {
    "title": "Home",
    "i18nMeta": {
      "en": {
        "title": "Home",
        "uri": "home"
      },
      "de": {
        "title": "Startseite",
        "uri": "home"
      }
    }
  }
}
```

## `site.frontendUrl()`

Returns the frontend URL for the entire site. This is used in blueprints to configure the site-level preview link.

### Usage

```yaml [site/blueprints/site.yml]
options:
  preview: "{{ site.frontendUrl }}"
```

See the [Panel Configuration](/docs/headless/configuration/panel) page for setup instructions.

---

Every page of this site as Markdown: <https://kirby.tools/sitemap.md>