Jump to main content Jump to doc navigation


For some pages you might want to show breadcrubs as a quick way to navigate in the hierarchy. Under MODx.util there's a function getHeaderBreadCrumbs that'll stub out a breadcrumb header for your page.


Name Description Default
header String ID of the header that should be created or header object (needs an ID as well).
trail Array of trail objects. The trail object is required to have text and href properties. If you don't want to set href, set it as null or false. []


This function returns flavoured modx-breadcrumbs-panel object with this id: modx-header-breadcrumbs. Functions worth noting that you may want to use:

  • updateTrail - takes trail and replace parameters. trail can be array of trail objects or a single trail object. if true is passed in replace, whole trail will get replaced
  • updateHeader - takes text as a parameter and will update the header itself (the last part of breadcrumbs)


Examples of a usage can be found in modx.panel.resource.js, modx.panel.user.js, modx.panel.source.js or modx.panel.context.js.

Usually you call the util function insited panel's items and define the home crumb:

MODx.util.getHeaderBreadCrumbs("modx-context-name", [
        text: _("contexts"),
        href: MODx.getPage("context")

Then from the setup listener or key events on name (or whatever other) filed you call updateHeader:


Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.



$0 per month—let's make that $500!

Learn more