Guides

User guides walk through real project tasks — building a pattern, tuning performance, migrating from another plugin, or wiring headless output. They are story-driven and practical. For API parameters and class references, use the main docs sections.

Performance

The complete guide to Navigation performance

Before-and-after template patterns, query behaviour, caching, and when to use hydration flags.

Templating

Build a header menu with dropdowns

Passive triggers, nested links, active states, and accessible markup for a typical site header.

Build a section sidebar with Context API

Sibling links and branch navigation for the current page without hand-rolling parent queries.

Build a mega menu

Menu fields, column groups, and custom partials for multi-column dropdown panels.

Breadcrumbs: URL trail vs menu trail

Choose between URL-segment breadcrumbs and menu-tree breadcrumbs.

Auto-list a section with Dynamic nodes

Project entries at read time instead of adding every child manually in the builder.

Node custom fields for icons and badges

Per-link icon classes, badge text, and other metadata on the node field layout.

Frontend & headless

Expose a menu as JSON for a JS frontend

Nested menu data from craft.navigation.tree() for decoupled front ends.

Navigation with Blitz and full-page cache

Connect Navigation cache invalidation to Blitz when cached pages include menus.

Configuration

render() vs nodes() vs tree()

Pick the right output API for HTML templates or JSON endpoints.

Multisite menus

Per-site enablement, URLs, and rendering on the correct site.

Migrations

Migrating from FreeNav

Copy menus from FreeNav (opens new window) via the CP or console.

Migrating from Navigate

Copy menus from Navigate (opens new window).

Migrating from Olivemenus

Copy menus from Olivemenus (opens new window).

Migrating from tka navigation

Copy menus from tka navigation (opens new window).

See Migrations for console commands and shared options.