Standards allows you to easily create and design global navigation of your brand site with a unique element called Menu.

In this guide:

Menu basics

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>

Menu settings

While selecting a Menu element, the right sidebar will display the available settings for styling the container. Keep in mind: the menu is a parent containing everything within.

Type
Position
Sizing
Spacing
Fill, Stroke, Icon, Hover

Menu states

Menus have a range of states that can be styled individually, or synced together. Both closed and open have rest and hover states.

Closed
Open

Settings within Menu states

Each state can have these settings altered independently from another, or synced together.

Sizing
Spacing
Fill
Stroke
Hover
Icon

<aside> 💡

Note: There is additional spacing added to the Open state of a menu based on the the Sizing and Icon settings of the Closed state. This additional padding is removed if it is set to Always Open. See more below.

</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.

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
Always open

Related Guides

Editor overview

Button

Dropdown

Click & Hover Behaviors