Portal Community
Atlas Forms

Breadcrumb

The breadcrumb layout control renders a navigation path trail — a horizontal list of links showing where the user is within a hierarchy. Use it at the top of forms embedded in larger applications to provide context and allow backtracking through the navigation hierarchy.

Minimal Example

{
  "id": "page-breadcrumb",
  "type": "breadcrumb",
  "order": 1,
  "width": "full",
  "settings": {
    "items": [
      { "label": "Dashboard",      "url": "/dashboard" },
      { "label": "Applications",   "url": "/applications" },
      { "label": "New Application" }
    ]
  }
}

Settings Reference

SettingTypeDefaultDescription
itemsBreadcrumbItem[]—Array of breadcrumb items from root to current page
separatorstring"/"Character or HTML between items (e.g., ">", "·")
showHomeIconbooleanfalsePrepend a home icon before the first item
maxItemsnumber—Collapse middle items with ellipsis when path is long
sizesm | md | lgsmText size

Breadcrumb Item Schema

interface BreadcrumbItem {
  label: string;     // Display text
  url?: string;      // Navigation URL (omit for current/last item)
  icon?: string;     // FontAwesome class (optional)
}

With Icons

{
  "id": "nav-breadcrumb",
  "type": "breadcrumb",
  "settings": {
    "showHomeIcon": true,
    "separator": ">",
    "items": [
      { "label": "Home",             "url": "/",              "icon": "fa-solid fa-house" },
      { "label": "Customers",        "url": "/customers" },
      { "label": "ACME Corp",        "url": "/customers/acme" },
      { "label": "Edit Profile" }
    ]
  }
}

Dynamic Breadcrumb from Context

In multi-record forms, breadcrumb labels can be populated from the form's context binding, showing the actual record name rather than a static label:

{
  "id": "record-breadcrumb",
  "type": "breadcrumb",
  "settings": {
    "items": [
      { "label": "Customers",   "url": "/customers" },
      { "label": "{{context.customerName}}", "url": "/customers/{{context.customerId}}" },
      { "label": "Edit" }
    ]
  }
}

Long Path Collapsing

{
  "settings": {
    "maxItems": 4,
    "items": [
      { "label": "Root",     "url": "/" },
      { "label": "Level 1",  "url": "/l1" },
      { "label": "Level 2",  "url": "/l1/l2" },
      { "label": "Level 3",  "url": "/l1/l2/l3" },
      { "label": "Level 4",  "url": "/l1/l2/l3/l4" },
      { "label": "Current Page" }
    ]
  }
}
// Rendered: Root > ... > Level 4 > Current Page
Breadcrumb Navigation Breadcrumb url links navigate the browser when clicked. For single-page applications, configure the Atlas Forms navigation action handler to intercept breadcrumb clicks and use client-side routing instead of full page navigation.
← Modal Dialog Trigger Next: Sidebar Navigation →