Navigator

Use the Navigator to manage element hierarchy and position.

The Navigator displays all of the elements on the current page in a hierarchical tree structure. It allows you to select and reorder any element(s) on a given page, including elements that might be tough to select on the canvas — for example, elements with a negative z-index. Any changes made to element hierarchy in the Navigator reflect instantly on the canvas .

How to open and pin the Navigator

You can open the Navigator from the left toolbar by clicking the Navigator icon or by pressing Z on your keyboard. The Navigator also opens automatically when you drag a new element from the Add panel over the Navigator icon or onto the canvas, or drag an existing element on the canvas.

How to pin the Navigator

On a browser wider than 1440px, you can pin the Navigator so it stays open all the time, allowing you to select, add, and reorder elements more quickly.

To pin the Navigator, open it and click the “pin” icon. To unpin it, click the “unpin” icon.

How to view the elements on the current page

The Navigator lets you view all elements on a page, the element hierarchy, and which elements are nested inside other elements.

You can expand individual parent elements to view their child elements or collapse them (if they’re already expanded) to hide their child elements. Child elements‘ names are indented to the right to indicate that they’re children of the parent element.

You can also expand or collapse all parent elements simultaneously to view all elements on a page or to show only the top-level parent elements (i.e., direct children of the Body element).

To expand or collapse an individual parent element, click the “toggle” icon to the left of the element’s name in the Navigator.

To expand or collapse all parent elements simultaneously, click the “expand/collapse” icon at the top of the Navigator, or press Option + Z (on Mac) or Alt + Z (on Windows).

How to select elements in the Navigator

When you hover over an element in the Navigator, the corresponding element on the canvas is highlighted with a blue outline. When you hover over an element on the canvas, the element‘s name is highlighted in the Navigator.

You can click on an element’s name in the Navigator to select the element. When you select an element in the Navigator that‘s outside of the current view, the canvas automatically scrolls to that element. Once you’ve selected an element in the Navigator, you can style it in the Style panel, configure the element’s settings in the Element settings panel, and create interactions in the Interactions panel.

How to select elements that can’t be selected on the canvas

The Navigator is especially useful when selecting elements that are hard or impossible to select on the canvas, including elements with a display setting of ‘None’ or elements with a negative z-index.

How to identify unique elements in the Navigator

In the Navigator, you may notice that some elements have icons to the left or right of their name. These icons help you identify:

• components
• elements connected to the CMS
• auto-positioned and pinned grid children
• elements hidden on the canvas
• elements that trigger an interaction
• localized elements

The icons in the Navigator communicate important information about the element:

• Green “box” icon (left) — the element is a component
• White “box” icon (right) — the element is an open component
• “Binding” icon (right) — the element is connected to a Collection field or has conditional visibility applied
• “Hash” icon (right) — the element is a grid child that is pinned to a cell or an area in its grid‍
• “Eye-slash” icon (right) — the element is hidden and is not visible on the canvas
• “Lightning” icon (right) — the element has an interaction trigger applied
• “Globe” icon (right) — the element has been localized in the current locale view

How to move elements using the Navigator

You can move elements directly on the canvas, but moving elements using the Navigator can give you more precise control, especially when nesting elements inside each other.

To move an element using the Navigator, open the Navigator and click and drag the element you want to move to its new position.

To nest an element inside another element, drag the element over the new parent element and hover until it’s indented to the right, before releasing your mouse button or trackpad.

When you move a parent element, all of its child elements are moved too, allowing you to quickly reorder groups of elements or even entire sections of a page.