Menus are elements that can be added to your project, and exist outside the document grid and max width. Additionally, Menus are disconnected from Pages, meaning that any changes to a menu will appear on all pages. Unique Menu designs per page are not possible. Menus are well suited for Buttons and Dropdowns as navigation, but can contain almost any element.

Adding a menu

Navigate to the Menu tab at the top in the left sidebar.
Select New menu just below the tabs.
Choose a menu style to create the Menu.

Menu styles

Menus currently support two different styles. These styles each have unique advantages, described below.

Sidebar

This menu style is well suited for large projects with many pages, subpages, and links. Sidebar menus can open & close, overlaying the page content, or they can persist open next to the page content, reducing the available grid area.

Flyout

This menu style is well suited for smaller projects with a smaller number of pages, and links. Flyout menus appear as an overlay above the page contents, and can open & close or persist open above the page.

<aside> 💡

Note: It is possible to switch between Menu styles at any point after creation.

</aside>

Adding content to Menus

Almost all elements in Standards may be added to a Menu. Anything you can add to a Column can be added to a Menu. Rows, Groups, and by extension Automations or any Components of Row and Groups cannot be added inside a Menu.

Adding to Menu

From within the editor, select elements like Media M, Text T, and Button B ****from the + ****menu. Some Components C ****may also be chosen to add into menus.
Hover over the open Menu, and select the add point overlay.
Menu content can be reordered by click + dragging from the Menu layers in the left sidebar.

Styling buttons in a menu

https://www.loom.com/share/4720f8d578624c5a99f4990dcf274bfd?sid=269c7b6f-1e2a-4580-bbd4-fb9fed47825c

Menu interactions

Each menu must have some interaction set. Additionally, certain settings may be unique depending on the chosen menu style and interaction type, so it’s worth being intentional about this setting. The available interactions for a Menu are listed below.

For more information, see Click & Hover Behaviors

Open & close on click
Open & close on hover

Related Guides

Editor overview

Button

Dropdown

Click & Hover Behaviors