Breadcrumb Navigation

How Breadcrumbs Are Generated

App Studio reads the breadcrumbParent chain for the current AppPage and builds the breadcrumb trail automatically:

// AppPage definitions with breadcrumb hierarchy
Pages:
  dashboard     (route: /,           breadcrumbParent: null)
  leads-list    (route: /leads,      breadcrumbParent: "dashboard")
  lead-detail   (route: /leads/:id,  breadcrumbParent: "leads-list")
  lead-edit     (route: /leads/:id/edit, breadcrumbParent: "lead-detail")

// When on lead-edit:
Breadcrumb → Dashboard > Leads > Lead: lead-456 > Edit
// Each crumb links to that page's route

Token Expressions in Page Titles

Breadcrumb labels use the AppPage's title field. Titles support token expressions — route params are available:

// AppPage titles:
dashboard:    "Dashboard"
leads-list:   "Leads"
lead-detail:  "Lead: {{ route.id }}"          // "Lead: lead-456"
lead-edit:    "Edit"

// Breadcrumb trail:
Dashboard > Leads > Lead: lead-456 > Edit

Breadcrumb Display Widget

Breadcrumbs render automatically in the app shell header. You can also place a standalone Breadcrumb widget in any Pane for custom positioning:

// Breadcrumb widget config (in a Pane)
{
  "widgetId": "page-breadcrumb",
  "type": "Breadcrumb",
  "config": {
    "separator": ">",          // "/" | ">" | "›" | custom
    "maxItems": 4,             // truncate after N items with "..."
    "showHome": true,          // prepend home icon linking to home page
    "homeIcon": "house"
  }
}

Disabling Breadcrumbs

If you do not want breadcrumbs on certain pages (e.g., the home dashboard), set the AppPage's showBreadcrumb: false in its config, or simply leave breadcrumbParent as null (a root page shows no breadcrumbs in the default shell).