User Guide
The Menu Builder is an in-page, drag-and-drop editor for the top mega menu. You shape the entire navigation visually — no code, and no separate admin screen to hunt for. Every change is scoped to the current portal, previewed live, and protected by a full version-history ring so you can always roll back.
Understand the scope and purpose before you start editing.
The Menu Builder is the primary authoring tool for the ACME mega menu. It controls the top-level navigation items that every visitor sees — their labels, URLs, optional badge text, and the rich submenu content that appears when a visitor hovers or clicks. It does not control the DNN page tree directly; instead it maintains its own JSON configuration (stored server-side as AcmeMegaConfig.json) which the runtime reads at page load.
AcmeMegaConfig.json
Use the Menu Builder when you want to:
Changes are per portal — each DNN site keeps its own menu configuration independently.
Know what each part of the interface does before you start clicking.
Follow these steps to open the builder and edit your top navigation.
Log in to the site as an Administrator or Host / SuperUser. The Menu Builder only appears for users who can manage the portal — the floating gear button and the eyebrow-bar link are both hidden for regular visitors.
In the dark eyebrow bar at the very top of any page, click the red Edit menu link. You can also click the floating red gear button in the bottom-right corner of the screen — both open the same full-screen Builder panel.
The panel mounts over the page, spanning the full viewport. DNN’s PersonaBar (if visible) is accounted for automatically — the Builder slides in beside it without overlap.
The Builder opens in Content mode by default, showing the Menu Structure panel on the left and the item editor on the right. If you see the Theme or Design panel instead, click the Content tab in the top toolbar to switch back.
The left panel lists every top-level item currently in your mega menu in display order. Each item shows its label and the submenu type badge. A yellow “empty” indicator next to an item means its submenu has no content yet — visitors would see an empty panel.
Drag the ⠯ grip handle on the left side of any row to move that item up or down in the list. The order here is exactly the order visitors see in the navigation bar. Release to drop the item into its new position.
Click anywhere on an item row (other than the drag handle) to open its editor in the right pane. The selected item is highlighted in red. The right pane loads immediately with the item’s current Settings and Content.
The Settings tab holds the item’s visible Label (e.g. “Services”), its Link URL (the href when the label is clicked directly), and an optional Badge text. The Badge renders as a small red pill next to the label — useful for highlighting new or promotional items with text such as “New”, “Sale”, or “Beta”.
You can also set an Icon for the item, choosing from a library of 40+ built-in icons (link, users, briefcase, globe, chart, shield, and many more) that render inline with the label in the navigation bar.
Switch to the Content tab in the right pane. At the top of this tab you choose the Submenu Template — the layout pattern used when a visitor opens this item’s mega panel. The available templates include: a simple Plain link (no submenu), a Tabs layout with content panels, a Services Vertical grid, an About Grid layout, and more. Each template enables a different set of content fields below it.
Once a template is selected, the Content tab shows the fields for that layout. For example, the Tabs template lets you add multiple tab entries, each with a heading, body text, optional image, and a list of links. The Services Vertical template shows a list of service items with icon, title, description, and link. Fill in every section you want visitors to see.
Scroll to the bottom of the Menu Structure panel and click + Add Menu Item to create a fresh top-level entry. It appears at the bottom of the list with a default label of “New Item”. Click it to select it, then edit its Settings and Content in the right pane as usual.
The Builder can fetch your actual DNN page tree and insert it into the menu automatically. Click the Load from DNN pages card in the Menu Structure panel. The Builder queries the DNN PersonaBar API (or falls back to reading the live navigation DOM) to build a list of all pages in the portal. Select the pages you want, then click Add selected pages. Each selected page becomes a Plain menu item pointing at its DNN URL. This action automatically snapshots the current menu to the version history ring before importing, so you can always undo it.
Click Save Changes (the red button in the top-right toolbar). The Builder serialises the current menu to JSON, pushes it to the server (or downloads AcmeMegaConfig.json if no server save URL is configured), and simultaneously records a “Saved changes” entry in the version history ring. The menu renders instantly for every visitor once saved.
If you want to abandon unsaved edits and return to the published menu, click Reset. A confirmation dialog warns you that you will lose any unsaved work. Confirming clears the local browser draft and reloads the page, re-reading the last saved server configuration.
Every save, every import, and any manual snapshot creates a restore point — you can always go back.
The Builder keeps a ring of up to 24 snapshots in your browser’s localStorage. Every time you click Save Changes or use Load from DNN pages, a snapshot is automatically recorded. You can also save a manual snapshot at any time.
localStorage
Click the Versions button in the toolbar. A dropdown panel appears listing all stored snapshots, each with a label and a relative timestamp (“just now”, “3 min ago”, “2 hr ago”, etc.).
Click the Save a snapshot now button at the top of the Versions panel. A browser prompt asks you to name the snapshot. Enter a descriptive label such as “Before adding Shop mega panel” and confirm. The snapshot is added to the list immediately.
Find the snapshot you want in the list and click Restore next to it. A confirmation dialog warns you that this will replace the current Builder menu. Confirm to load that version back into the Builder. The menu structure updates instantly — review it, then click Save Changes to publish it to visitors.
Click the × button next to any snapshot you no longer need. Deletions are permanent but only affect your local snapshot ring — the published menu on the server is not affected.
Note: version snapshots are stored in your browser’s localStorage. They are not shared between different browsers or devices, and they are cleared if you clear browser storage.
Concrete answers to the things you’ll actually need to do.
Select the item in the Menu Structure panel, switch to the Settings tab, clear the Label field and type the new name. Click Save Changes. The new label appears in the live navigation immediately.
Select the item, go to Settings, update the Link URL field with the new path (e.g. /services/consulting). The link is used when a visitor clicks the label directly from the navigation bar. Save when done.
/services/consulting
Select the item, go to Settings, type your badge text (e.g. New or Hot) into the Badge field. The pill renders in red next to the label in the navigation bar. Leave the Badge field empty to remove it.
New
Hot
Select the item in the left panel. Scroll to the bottom of the right pane and click the Delete item button. Confirm the deletion. The item disappears from the list. Save Changes to publish the removal.
Select the item, switch to the Content tab, then choose a different template from the Submenu Template dropdown. Warning: switching templates resets the submenu content fields, so save a snapshot first if you want to preserve your existing content.
Save a manual snapshot first (Versions → Save a snapshot now). Then click Load from DNN pages, select all pages, and confirm. The Builder replaces the current menu with plain items for each selected DNN page. You can then enrich each item’s Content tab at your own pace.
Problems you may encounter and how to fix them.
Answers to common questions about the Menu Builder.
No. The Menu Builder only changes the AcmeMegaConfig.json configuration file. Your DNN page tree (and its page permissions) are completely separate. The builder reads page names and URLs from DNN only when you use “Load from DNN pages”, and even then it only writes the JSON config, not the DNN page database.
No. Each DNN portal (child site) has its own independent menu configuration. Changes you make on one portal have no effect on other portals.
Yes. Use the version history (Versions button) to save named snapshots. You can save a snapshot before making large changes, work on the new structure, and restore the old snapshot at any time. There is also a named-config system (accessible in the Configs bar) if you are running the full AMB v2 setup.
Version snapshots are stored in localStorage and will be lost if you clear browser storage. The published menu on the server is not affected — only your local snapshot ring is deleted. Export the JSON manually (the downloaded AcmeMegaConfig.json) if you want a permanent off-browser backup.
There is no hard limit set by the builder itself. In practice, the navigation bar has a finite horizontal space — most designs support 6 to 9 top-level items comfortably before the bar becomes crowded. Very wide items (long labels, wide mega panels) may cause layout issues on smaller screens.
The live page behind the Builder panel updates in real time as you edit, because the ACME runtime re-renders the menu from the current in-memory state. Simply close the Builder panel temporarily (click ×) to see your unsaved changes on the live page, then reopen it to continue editing. Clicking Reset discards those unsaved changes.
Reset discards all unsaved local edits and reloads the last published (server-saved) menu. Restore from version history loads a specific past snapshot into the Builder editor — you still need to click Save Changes to publish it to visitors.
DNN’s in-page edit mode overlays its own action menus on every module. Showing the Builder gear button simultaneously would cause z-index conflicts and confusing overlapping controls. The Builder detects the dnnEditState body class and hides its floating buttons automatically until you exit DNN edit mode.
dnnEditState
ACME Demo — User Guide · Menu Builder