module NativeMenu – visual drag & drop menu builder (mega menus, mobile, multilanguage)

[Roych]

Hi everyone,

A visual menu builder for ProcessWire has been on my to-do list for a long time, and it’s finally ready. Meet NativeMenu: you build every kind of menu visually, with drag & drop and no code.
Simple dropdowns, mega menus and a logo in the middle are all possible.

What it does

• Visual editor. The menu bar is edited as it looks. Drag elements or pages from the tree onto it, click an item to edit it, double-click to rename. Undo/redo, drafts, versions and a live preview are included.
• Mega menus. Columns with a 12-unit grid. Blocks: links, headings, text, images, latest articles, buttons, search and HTML.
• Mobile. Drawer (left/right), fullscreen or push-down menu. Submenus open as an accordion or as slide-in panels. Each mega menu has its own mobile layout.
• Design without CSS. Style presets, colors, background, gradient or image, border, shadow and font.
  • “Match my website” reads colors and fonts from your template.
  • Bootstrap 5, UIkit 3 and plain markup are supported, and every class can be overridden.
• Effects. Dropdown animations (fade, slide, grow, unfold, reveal), hover effects including a sliding indicator, a sticky / shrinking / hide-on-scroll header and an animated menu button.
• Smart import. Paste the menu HTML of any template, or give a URL. Links are matched to your real pages, and the original markup can be kept. An optional AI assistant can build a menu from a description or match the remaining links.
• One menu, many outputs. The same menu can also be rendered as footer columns, breadcrumbs (with JSON-LD), an HTML sitemap, an “In this section” sidebar, or as raw data for custom markup.
• Multilanguage. Labels and URLs per language, page items follow the page title and URL in each language, and there is a language switcher with hreflang.
• SEO / GEO.
  • Clean <nav> markup and schema.org SiteNavigationElement.
  • rel attributes per item.
  • /llms.txt generated from your menus, per language.
• Check tab.
  • Flags broken links and pages that were deleted, unpublished or hidden.
  • Flags missing translations, alt texts and low color contrast (WCAG).
  • External links are checked daily.
     
• More: show items only on certain pages or templates, scheduled items (from / until), visibility by role, anonymous click statistics (with NativeAnalytics integration), a library of reusable blocks, and a one-click offer to add new pages to the menu.
   

AI assistant (optional)

NativeMenu includes an optional AI assistant. It works with Anthropic (Claude) or any OpenAI-compatible API, including Azure, Mistral or a local server. Enter your API key in the module settings to switch it on.

• Build a menu from a description. In the import dialog, choose Describe (AI) and write what you want. For example: "Main menu with Home, a mega menu 'Services' with one column per category and an image, About us with its subpages, Blog, and a 'Contact' button on the right." The AI only uses pages that exist on your site, so every link works.
• Match links when importing a template. After a template import, links that could not be matched get an Ask AI to match button. The AI finds the right pages even across languages (e.g. "O nas" → "About us"). Every match it finds is marked "to check".
• You always review first. Proposals appear in the same review table as a normal import, and nothing is saved until you confirm.
• Private. Only page IDs, paths and titles are sent to the provider, never page content or user data. Requests are limited to 30 per user per hour.
• Extendable. NativeMenuAI::request is hookable, so you can connect any other provider.

    

Usage

 

php

<?= $modules->get('NativeMenu')->render('main-menu') ?>
<?= $modules->get('NativeMenu')->renderColumns('main-menu') ?>      // footer
<?= $modules->get('NativeMenu')->renderBreadcrumbs('main-menu') ?>

CSS and JS are added automatically, only on pages that show a menu. Menus are cached per language and role, and the cache is cleared when a page in the menu changes.

Requirements: ProcessWire 3.0.200+, PHP 7.4+ (tested on 8.3). It works with the Uikit (incl. Konkat light/dark), Reno and Default admin themes.

Install: copy the folder to /site/modules/NativeMenu/, install the module and open Setup → Menus.

Feedback and ideas are very welcome!

Download: NativeMenu-1.0.0.zip

Enjoy
R

 

[Krlos]

Awesome!! 😮‍💨

I will try this tonight