Menus Sidebar

The Menus tool in the builder's left toolbar is where you create and edit your interface's menus. This article is a step-by-step guide to the panel. For what menus are and how to show them on your pages, see Menus.

Creating a menu

1. Click the Menus tool in the left toolbar.
2. Click New Menu.
3. Enter a Title, for example "Main Navigation". The Key Name is filled in from the title; it's what blocks and code use to find this menu. Once the menu is in use, leave the key alone, because changing it breaks the places that show the menu. You can rename the title at any time.

Adding menu items

Click a menu to open it, then:

• Add Menu Item adds a single item.
• Add All Routes adds an item for each route in your interface. This is a quick way to start a navigation menu, and you can remove the ones you don't need.

Each item has these settings:

• Title: the text people see.
• Type: Internal route (a route in this interface) or External URL.
• Route: for internal routes, the route to link to. Links use the route's ID, so changing a route's title or URL path won't break them.
• URL and Target: for external URLs, the full address and whether it opens in the Same Window/Tab or a New Window/Tab.
• Advanced Options: switch this on to hide the item when people are logged in or logged out, or to show it only between certain times or dates.

Organising items

• Reorder: drag items up or down, or into another item.
• Nest: open an item's ⋮ menu and choose Add child item to build a dropdown or sub-menu. Items with children show an arrow you can use to expand or collapse them.
• Hide temporarily: click the eye icon on an item to disable it without deleting it.
• Edit, Duplicate or Delete an item from its ⋮ menu.

Managing menus

Back in the menu list (use the back arrow at the top of the panel), each menu's ⋮ button offers Edit, Duplicate and Delete. Once you have more than four menus, a search box appears at the top of the list.

Things to know

• Menu changes are part of the interface's working draft. Save and publish to put them live; see Saving & Publishing.
• The menu item's advanced options also include "Disable this menu item on small/medium/large screens" switches, but published sites don't currently apply them. To hide an item at certain screen sizes, give the menu block a class and use CSS media queries instead.