Skip to content
pagecraft

Nav Builder

Audience: Editor.

PageCraft ships a navigation block (data-cb-type="nav-menu") that renders a full top nav with logo, menu items, CTA buttons, and social links. It's the most full-featured stock section and has two distinct edit surfaces: a slideout panel for content and a per-item visual modal for styling.

Opening the editors

  1. Drag the nav-menu section into the canvas, or use a stock pack section that already includes one (most footer / header packs do).
  2. Click anywhere on the nav (but not on a link) to open the slideout content editor.
  3. Click any rendered menu item or CTA button to open the per-item visual modal.

Slideout content editor

The slideout shows, in order:

  • Logo — image upload or text label
  • Source — a segmented toggle between PageCraft (manual menu) and Structure (driven by the EE Structure addon's page tree)
  • Menu items — the list, mode-dependent (see below)
  • Buttons — CTA buttons (Add Button, per-row Delete; click the rendered button in the canvas to edit its styling)
  • Social Links — Twitter, Facebook, LinkedIn, etc. — paste each profile URL

PageCraft mode (manual)

The menu items list is fully editable: per-row Label, URL, "Open in new tab" checkbox, Delete icon, and drag-to-reorder. Submenus follow the same pattern nested under their parent. Use this when the nav doesn't track Structure or when you want to handcraft the menu.

Structure mode (driven by EE Structure)

The menu items list is replaced by a read-only notice: "Menu items derived from Structure pages (2 levels max)." The rendered nav pulls live data from EE Structure: top-level pages plus one nested level, ordered by the Structure tree, respecting each page's "Hidden in nav" flag.

Switch modes anytime — manual edits aren't lost when you flip to Structure, they're just inactive while Structure is selected.

Per-item visual modal

Click any rendered .nav-link or .nav-btn in the canvas to open the modal. The modal exposes visual styling only — the content (label, URL, new-tab) lives in the slideout (PageCraft mode) or in the EE Structure page (Structure mode), not the modal.

Field set:

  • Background color (with separate hover variant)
  • Text color (with separate hover variant)
  • Font size, Font weight
  • Width — auto / full
  • Border — style (transparent / current), thickness (none / 1 / 2 / 3), radius (default / none / sm / normal / md / lg / xl / 2xl / 3xl / full)
  • Padding — left/right grouped, top/bottom grouped
  • Margins — all four sides

Any change is applied live to the canvas; close the modal and the nav reflects it immediately.

Per-item toolbar

While editing, every menu item shows a small floating toolbar with three icons:

  • ✏ Edit (always shown) — opens the visual modal
  • 🔗 Link (CTA buttons only) — opens the modal with the URL field focused
  • 🗑 Delete (hidden in Structure mode for menu items)

The toolbar disappears when you click outside the nav. The Link icon is intentionally absent on plain .nav-link items because their URL lives in the slideout (PageCraft mode) or in Structure (Structure mode); a Link shortcut on the toolbar would be confusing in both cases.

Reference

  • Plugin source: themes/user/pagecraft/assets/plugins/nav-menu/index.js (≈2,400 lines)
  • Mode flag: data-cb-use-structure-nav="true" on the nav element
  • Structure data fetcher: Services/StructureNav.php and the structure_nav_preview ACT