You are viewing beta documentation for Navigation 4.x.
Template Guides

Context & Breadcrumbs

Breadcrumbs show a page’s place in a hierarchy. Choose whether that hierarchy follows your URL path or the menu you built in Craft. A News article can have a URL trail even when it has never been added to a menu. The examples belong in the Twig template displaying your page.

When to Use Which

NeedUse
SEO trail matching URL segments / entries not in the menuurlBreadcrumbs()
“You are here” through the menu tree, mega-menu context, headless menu trailmenuBreadcrumbs()
Sidebar siblings or branch for the current pagecontext()

Context API

{% set ctx = craft.navigation.context('mainMenu') %}

Pass additional node query criteria as the second argument, for example craft.navigation.context('mainMenu', { siteId: currentSite.id }).

For a sidebar example, see Active State & Context. The method list is in the Context reference.

URL-Segment Breadcrumbs

craft.navigation.urlBreadcrumbs() walks the current URL segments and looks up Craft elements for each segment. It is not menu-tree aware.

{% for crumb in craft.navigation.urlBreadcrumbs() %}
    <a href="{{ crumb.url }}">{{ crumb.title }}</a>
{% endfor %}

Each crumb is an array:

KeyDescription
titleSegment or element title
urlAbsolute URL for the segment
segmentURL segment string
isElementWhether a Craft element matched
elementThe element, if matched
elementId / elementTypeElement metadata when matched

Options: limit — maximum number of items.

craft.navigation.menuBreadcrumbs(handle) returns breadcrumb arrays describing the nodes from the menu root to the deepest current node.

{% for crumb in craft.navigation.menuBreadcrumbs('mainMenu') %}
    <a href="{{ crumb.url }}">{{ crumb.title }}</a>
{% endfor %}

Each item includes title, url, node, current, and link keys. Respects per-site URLs and urlSuffix.

Dynamic projected pages can appear in the trail when they match the current URL.

GraphQL

Headless equivalents: navigationContext and navigationMenuBreadcrumbs. See Context & Breadcrumbs.