What a menu is
A menu is a titled list of links with a key (shown as the Slug). It has no place of its own: where it appears depends on the theme and regions. Fixed keys: header and footer (read by themes with built-in header and footer), mobile-nav (the bottom bar on phones, limited to 4 top-level items in the editor) and any other key used by a saved-menu element in a page or region. Creating menus needs a plan that includes menu management.
The list
New Menu asks for a Menu Title and a Latin Slug (lowercase letters, numbers and hyphens; Persian characters are dropped). A slug that exists is refused. Quick-create chips offer Header Navigation, Footer Navigation and Mobile Bottom Nav. Edit opens the builder; Delete Menu is permanent.
The builder
Add items, drag to reorder or nest (drop in the middle of a row to make a child), duplicate or remove them, with Undo/Redo. Remove has no confirmation; Cancel discards, and nothing is saved until Save. For each item: Label, a destination (URL, page, anchor, blog category, blog post, store category, store product or brand), Open in new tab, an Icon, and for top-level items Mega menu panel with Build panel in Studio (the panel is its own region and must be published there).
If the site has several languages you can translate the menu title only; item labels are the same everywhere. How deep submenus show depends on the theme.
Links keep up, mostly
Picking a page, post, category, product or brand puts its title in Label; change the label afterwards if you want, and it stays as you typed it until you pick a different item. Links to a page, blog post or blog category store its id, so they follow a changed address; if the target is trashed they fall back to the old address. Store category and product links and typed URLs never update. Unsafe URL schemes become #.
The current page is highlighted
On the site, a menu shows where the visitor is. The link to the page being viewed is highlighted, and so is the item whose submenu or mega menu panel holds that page. When no link in the menu goes to the page itself, the link of the section the page is in is highlighted instead (a Blog link on a blog post).
- The home link is highlighted only on the home page.
- A link to an anchor (
#…) or to another language is never highlighted. - The mobile bottom bar works the same way. Its buttons are one menu and the menu behind its middle button is another, which opens on the submenu that holds the page.
Until you style them, both show in the accent colour. To style them in the Studio, select the Menu element and open the Inspector's Style tab. Its Link section has the states Normal, Hover, Current and Current parent. Current and Current parent take a text colour, background and border, set per device like any other style. The drawer a menu opens on tablet and mobile uses those devices' values, so set Current there too if the drawer's links look different. Or target [aria-current="page"] (the page) and .is-current-ancestor (the item that holds it) in the custom CSS under Advanced Settings. The mobile bottom bar is not a Studio element, so custom CSS is the way to restyle its highlight.
Deleting
A menu cannot be deleted while a global region uses its key ("This menu is still used by a global region. Remove it there first."). The check does not look at themes with built-in headers, so deleting header, footer or mobile-nav can empty navigation without warning.
Caching
Menu changes show immediately in normal cases; allow up to about two minutes if a cache is not flushed.