Menus are elements that can be added to your project, and exist outside the document grid and max width. Menus can hold most content, and can be linked up to pages, downloads, external URLs, and more.

Fundamental rules

Menus are not constrained to mirror the pages of the project
All menu follow the same base settings
Menus are well suited for Buttons and Dropdowns as navigation, but can contain almost any element
Only one menu is allowed
Menus inherently have two unique elements: Controls and Logo

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 type as a starting place for your new menu
Note: All menus shown are the same element, just with different setting applied.

<aside> 💡

Keep in mind: If your project already has a menu, you can delete it to add a new one. Be aware if you delete an existing menu you will need to restyle and link buttons in the new one.

</aside>

Menu options

When adding a new menu, there are various styling options to start from. Keep in mind that all menus can be achieved by simply changing the settings of the menu at any point once it’s added. For instance, a flyout menu can be changed to a sidebar by editing the sizing and ‘always open’ settings.

Native elements

Within every menu are two native elements:

Logo
Controls

Both of these elements have unique properties, most noticeably that they can be absolutely positioned. They can be shown or hidden using the layer visibility toggle (eye icon) in the left sidebar.

Logo

This element is intended for the brand’s logo. Both the open and closed state of the menu can have this element, and they can differ from one another.

Related Guides

Button

Dropdown

Click & Hover behaviors