The Navigator gives you a visual way to interact with every element on a given page. There are three main features of the Navigator:

  • Selecting an element
  • Hierarchy of elements
  • Moving elements
Webflow Navigator

Selecting an element

If you hover over different elements in the Navigator, the corresponding elements on the Canvas will highlight. The same is true if you hover over elements on the Canvas, elements in the Navigator will highlight.

You can select an element from the Navigator by clicking on it. This will allow you to access the Style Panel and Settings Panel for that element just like if you had selected it on the Canvas.

 

When you select an element in the Navigator that is outside of the current view, the Canvas will automatically scroll directly to that element.

 

The Navigator is especially useful when selecting elements that are challenging or impossible to select from the Canvas. For example, if an element’s Display Setting is set to None you cannot see or select it on the Canvas, but you can still select it from the Navigator.

 

Hierarchy of elements

The Navigator also serves as a way to see your page hierarchy and which elements are nested inside of other elements.

You can choose to expand or collapse parent elements. Each time you expand a parent element, the child elements within become visible and are indented. You also have the options to Collapse All or Expand All.

Learn more about Element Hierarchy.
 

Moving elements

Elements can be moved directly on the canvas, but sometimes it’s easier to see the structure when moving elements in the Navigator. For example, you can reorganize sibling elements (elements that share the same parent) by dragging the elements around within the Navigator. You can also drag entire sections of the page and all the child elements within will be moved with it.

The Navigator also makes it simple to change the hierarchy of your page. This can be challenging on the Canvas with some nested elements—especially if they are similarly sized. In the Navigator, though, you can quickly grab a child element, and move it outside of its parent element. Likewise, you can nest an element by clicking and dragging it into another element.