Page Methods
Get frontend URLs, breadcrumb data, and multi-language metadata for navigation and language switchers in headless frontends.
frontendUrl()
Returns the page's URL on your frontend, taken from headless.panel.frontendUrl, or null without that option. site.frontendUrl() does the same for the site. Blueprints use both for preview links – see Panel Configuration for the setup:
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
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": "Blog",
"uri": "blog"
},
{
"title": "Article Title",
"uri": "blog/article"
}
]
}
}
i18nMeta()
Returns page metadata for every language the page is translated into – the same rule the sitemap applies. 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"
}
}
}
}