Page Methods

Helper methods for pages in headless setups.

Kirby Headless provides page methods to support multi-language sites and Panel integration.

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 page for setup instructions.

site/blueprints/pages/default.yml
options:
  preview: "{{ page.frontendUrl }}"

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

Usage

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

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

Response

{
  "code": 200,
  "status": "OK",
  "result": {
    "title": "Article Title",
    "breadcrumbMeta": [
      {
        "title": "Home",
        "uri": "home"
      },
      {
        "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

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

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

Response

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