You are viewing beta documentation for Navigation 4.x.
Templates

Context & Breadcrumbs

Navigation provides two breadcrumb strategies and a context resolver for section-style sub-nav. Choose based on whether you need URL structure or menu-tree semantics.

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') %}

Optional criteria mirror node query scoping (handle, site, etc.).

Full method list: Active State & Context.

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 a trail of 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.