WordPress Menus & Submenus
Overview
Menus let you create dynamic WordPress navigation that updates automatically when you add or remove pages in your CMS. In Flowmo, you design a menu item once on the canvas, attach it as a template, and the exported WordPress theme repeats it for every menu entry. You can also configure one level of submenus using the same template-driven approach.
For simple (non-WordPress) projects, Flowmo provides an inline menu-items editor where you manage labels and URLs directly inside the designer.
Prerequisites
- A Flowmo project with CMS mode enabled.
- At least one page (frame) on your canvas with a navigation element you want to turn into a dynamic menu.
- Familiarity with selecting elements on the canvas.
Step-by-step
1. Open the Menus tab
Open the right sidebar, switch to the CMS panel, and select the Menus tab. You will see an input field labeled "New menu name" and a + button next to it.
2. Create a menu
- Type a name for your menu (for example, "Main Nav" or "Footer Links") into the New menu name input.
- Click the + button.
Your new menu appears as a card in the list below. Each card shows the menu name, a trash icon to delete it, and several attachment buttons.
3. Design your menu item template on the canvas
Before attaching anything, design the element that represents a single menu item. This is typically an tag or a styled inside a
4. Attach Menu Item Template(s)
- Select one or more elements on the canvas that should repeat per menu item.
- Back in the Menus tab, click "Attach Menu Item Template(s)" on the menu card.
- A toast notification confirms how many elements were added. If you select elements that are already attached, you will see "No new elements added -- Selected elements are already in the menu".
The attached template elements appear in a list below the button showing each element's name. You can remove any template by clicking its trash icon.
5. Set up submenus (optional)
Flowmo supports one level of nested submenus. To configure them:
- Attach Submenu Container -- Select exactly one element on the canvas that acts as the submenu wrapper (for example, a nested
- Attach Submenu Item Template -- Select exactly one element that represents a single sub-item (for example, a nested
). Click "Attach Submenu Item Template (optional)". A toast confirms "Submenu item template set".
The status line at the bottom of each menu card shows the current state:
Submenu: container check / item check-- both are configured.Submenu: container -- / item ---- neither is configured yet.
6. Manage menu items (Simple CMS projects only)
If your project type is not WordPress (the "simple" project type), the Menu Items editor appears below each menu card. Here you can:
- Click the + button next to "Menu Items" to open an inline form.
- Enter a Label and a URL (for example,
/about). If you leave the URL blank, it defaults to#. - Click Add.
Each menu item displays its label and URL. Click on any item to edit it inline -- update the Label or URL fields and click Save, or press Enter to confirm. Press Escape or click Cancel to discard changes.
Reordering items
Drag items by the grip handle (the six-dot icon on the left) to reorder them. Flowmo uses drag-and-drop reordering for top-level items.
Adding sub-items
Below each top-level item, click "Add sub-item" (shown with a chevron icon). Fill in the Sub-item label and URL, then click Add. Sub-items appear indented beneath their parent.
Deleting items
Click the trash icon on any item to remove it. Deleting a top-level item also removes all of its sub-items.
Tips
- Name menus descriptively. WordPress registers each menu by name, so "Primary Navigation" is clearer than "Menu 1" when assigning menu locations in the WordPress admin.
- Keep template elements minimal. The simpler your template element, the cleaner the exported PHP will be.
- One submenu level. Flowmo currently supports a single level of nested submenus. For deeper nesting, you will need to customize the exported WordPress template files.
- Undo/redo syncs automatically. Menu changes respond to engine state notifications, so pressing Ctrl+Z / Cmd+Z on the canvas will also revert menu configuration changes.
Common issues
| Problem | Solution |
|---|---|
| "No elements selected" toast when clicking Attach | Make sure you select element(s) on the canvas before clicking the attach button. |
| "Select exactly one element" when attaching submenu container or item template | Submenu container and item template each require exactly one selected element. Deselect extras. |
| "Missing name" when creating a menu | The menu name input is empty. Enter a name before clicking +. |
| Menu Items editor does not appear | The inline editor only shows for simple (non-WordPress) projects. WordPress projects manage menu items through the WordPress admin instead. |
| Duplicate template elements ignored | If you re-attach an element that is already in the template list, Flowmo skips it and shows "No new elements added". |
Related articles
- WordPress Breadcrumbs -- Add breadcrumb navigation to your WordPress theme.
- WooCommerce Pages -- Set up shop, product, cart, and checkout page templates.