Navigation Menus

Menus control the links visitors use to move around your site. The menu builder lets you assemble a menu from your own content, arrange it by dragging, turn items into dropdowns or full mega menus, and then assign each menu to a place in the design.

Menu builder showing the list of items to add on the left and the menu structure on the right

Appearance → Menus. Choose what to add on the left; arrange the menu on the right. Items can be dragged to reorder and nest them.

How menus work

A menu is a named list of links. A menu does nothing by itself: you decide where it is used by assigning it in Theme Options (header, footer, top bar) or by placing a Menu widget. You can build as many menus as you need — for example a main menu, a footer menu of legal pages and a small utility menu for the top bar.

Create a menu → Add items → Arrange and style → Save → Assign it where it should appear

Where menus appear

Place	How to assign the menu
Header navigation	Theme Options → Header → Primary Menu (next to the logo) and Secondary Menu (right side of the header). See Header & Navigation Layouts.
Member account menu	Theme Options → Header → Logged-in User Menu: replaces the default account links for signed-in members. Build it from the User Menu source (see below).
Top bar	Theme Options → Top Bar → Left side menu / Right side menu. See Top Bar.
Footer	Theme Options → Footer → Footer Menu (the legal strip at the bottom). See Footer Layouts & Backgrounds.
Anywhere in a widget area	The Menu Widget shows any menu as a list or an inline row, for example in footer columns. See Widgets.

Websites you import come with menus

Importing a website template creates menus named Demo · <Site name> · primary (plus secondary, footer or utility menus when the design has them) and assigns them for you. Edit them like any other menu.

Creating and editing menus

Open Appearance → Menus. If you have no menus yet, the right-hand panel shows Give your menu a name, then click Create Menu.
Type a Menu Name and choose Create Menu. The menu is created empty and the item sources on the left become active.
To edit an existing menu, pick it in Select a menu to edit and choose Select. Choose create a new menu to start another.
Add items (next section), arrange them, then choose Save Menu. Nothing changes on the public site until you save.
Rename a menu by editing the Menu Name field and saving. Delete Menu (red link, bottom left of the structure panel) removes the menu after a confirmation; pages and posts it linked to are not affected.

With no menu selected the item sources are disabled until you create or select a menu.

Adding items

The column on the left is a set of collapsible sources. Open a source, tick the items you want and choose Add Items; they are appended to the bottom of the menu. Sources come from your content and from the modules you have installed.

Source	What you can add
Pages	Any of your pages (the Home, About and Contact pages, landing pages, and so on).
User Menu	Member-area links: Dashboard, My Account, Team, API Tokens, Notifications and Support. Use these to build the Logged-in User Menu.
Post Categories	Blog category archive pages.
Tags	Blog tag archive pages.
Posts	Individual blog posts.
Booking (when the module is on)	Booking (the booking wizard), and listing pages for Services, Categories, Providers, Locations and Packages, plus individual records.
Shop (when the module is on)	Shop (the storefront), and Products, Categories and Tags pages and records.
Payment Pages	The payment result pages of the payments module: Payment successful and Payment failed.
Custom Link	Any address. Enter the URL (full address, or a site path) and the Title shown in the menu, then Add Item. Both fields are required; the URL cannot be left as the placeholder `http://`.

Menu builder with the Booking source expanded in the left column

Each source opens like an accordion; the Booking and Shop sources appear when those modules are enabled.

Linked items keep up with your content

An item added from a page, post, category, service or product is linked to that record, not to a typed address. If you later change the page’s address, the menu link follows automatically. A Custom Link is a fixed address and does not.

Arranging items and nesting

Drag an item by its title bar to move it. Dragging an item slightly to the right under another item makes it a sub-menu item (it is labelled sub menu). Menus can be three levels deep: a top-level item, its children and their children.

Structure	What visitors get
Top-level item with no children	A plain link.
Top-level item with children	A dropdown: the children appear when the visitor points at or taps the item (see Open desktop submenus on hover in Theme Options).
Top-level item with children and Mega Menu switched on	A wide mega menu panel: its children become columns, and their children become the links inside each column.

Save after dragging

Reordering and nesting are stored when you choose Save Menu. If you leave the page first, the changes are lost.

Editing a menu item

Click the arrow at the right of an item to expand it. Every item has these fields:

A menu item expanded to show its label, title attribute and options

An expanded item. For linked items the Original line shows the page, post or product the item points to.

Field	What it does
Navigation Label	The text shown in the menu. Change it freely — it does not rename the page it links to.
Title Attribute	A tooltip shown when the pointer rests on the link. Optional; also read by some assistive tools.
URL	Only for custom links: the address the item goes to.
Original	For linked items, shows the real title of the page, post or product and links to it, so you can tell what the item points to after relabelling it.
Menu Options	Opens the advanced settings below.

Option	What it does
Mega Menu	No (default) or Yes. Only meaningful on a top-level item that has children. Reveals the mega menu settings.
Custom Class	A CSS class added to the link, for a developer or designer to style one specific item.
SVG or Icon Class	An icon shown beside the label in places that display menu icons (for example the top bar): an icon class name such as `ph ph-star`, or an inline SVG. Leave empty for no icon.
Open In	Same Window (default) or New Window. Use New Window for links that leave your site.

Mega menus

A mega menu is a large panel under a top-level item, useful when you have many destinations (a list of services, a product catalogue, a resource centre). To build one:

Create a top-level item (for example Services).
Add its columns as children (for example Hair & treatments, Colour, Nails), and drag the links for each column in as their children.
Expand the top-level item, choose Menu Options, and set Mega Menu to Yes.
Adjust the panel settings below, then save the menu.

A top-level menu item with Mega Menu set to Yes and its panel settings visible

Mega menu settings on the top-level item, followed by its columns (the sub menus) below.

Panel settings (on the top-level item)

Setting	What it does
Width mode	Content width fits the panel to its columns; Container width matches the page container; Full viewport spans the screen; Custom width uses your own value. The default for all menus is set in Theme Options → Navigation.
Custom width	The width used for Custom width, for example `960px`.
Columns	Number of columns in the panel (1 to 6, default 4).
Alignment	Whether the panel lines up with the start, centre or end of the item.
Optional heading	A heading shown at the top of the panel.
Feature image URL	A picture shown inside the panel, typically on one side (for example `/storage/media/…`).
Background image URL / Background color	A picture or colour behind the whole panel.
Padding / Gap	Space inside the panel and between its columns (CSS values such as `1.5rem` and `1rem`).

Setting	What it does
Column span	How many grid columns this child occupies (1 to 12). Give an important column a larger span.
Badge	A small label next to the item, such as New or Sale.
Highlight this menu item	Draws attention to the item with a highlighted treatment.

Mobile

On phones the whole menu opens in a slide-in drawer. Items with children open their sub-list when tapped, with a Back button to return, so mega menus become simple drill-down lists. Keep the most important links at the top of each group.

Good practice

Keep top-level menus short: five to seven items. Move the rest into dropdowns or the footer.
Use labels visitors understand (Book now, Prices) rather than internal page titles.
Check every menu on desktop and on a phone after saving.
If a page is unpublished or deleted, its menu item stops working; review menus after removing content.

Header & Navigation Layouts · Top Bar · Footer Layouts & Backgrounds · Widgets · Pages