Navigator panel

The Navigator displays the content on a current page in the Webflow Designer.

Not only does it show the entire element hierarchy (the structure and the relationship between parent and children elements), but you can also select and even move things directly from the Navigator.

First things first: You can see the Navigator when you add new elements and move elements around.

But, you can also access the Navigator from the left sidebar...and you can even pin it, so you can always view your content structure while you build and design your site.

So with that, we'll cover selecting stuff, element hierarchy on a page, and moving elements around.

Part one: Selecting.

As you hover over different elements in the Navigator, THOSE same elements on the Canvas will highlighted as well. 

Same thing on the Canvas too.

Hover over elements on the Canvas? They also highlight in the Navigator.

This makes it easy to make sure that you’re selecting or moving the right element.

And, if we click on an element in the Navigator, we have effectively selected it. 

Even if it's outside of our current view, it will take us right to that element on the canvas. 

And with any element selected, we can go over to the Style panel, Settings, or Interactions, and we can make any changes there. 

We can even right-click and we have all of the options available.

Basically, when we select something in the Navigator, it’s the same as clicking on that element from the canvas itself.

And here's where the Navigator is really helpful when it comes to selecting elements. 

Let's set this image to display: none (so it's not visible on the page)...and then hit escape to deselect. 

The image still exists, but we can’t select it again from the canvas.

The solution? In the Navigator, we can see that the image is there (there's even an icon that shows it's set to display: none). 

We can select it again... and switch it back, so it's no longer set to display:none.

That's selecting. Next part, Hierarchy.

In the Navigator, you can see your elements, but you can also view the hierarchy on your page (you can see which elements are nested inside other elements). 

You can always expand or collapse parent elements to see what’s inside. 

Each time you go down from a parent view to a child view, the elements become indented.

And at any time, if you want to go back to a more high-level view? 

You can toggle this to collapse all parent-most elements and to expand everything.

A full view of everything on your page, in order, nested.

And if it gets too crowded? 

You can expand the width of your Navigator by clicking and dragging the edge.

That’s hierarchy in the Navigator. Finally, let’s talk about moving. Which I already did.

But moving elements in the Navigator is similar to moving elements on the canvas. 

We can reorganize children elements withIN their parent element...and even outside. 

And vice versa: we can nest an element inside something else.

We can also move parent elements along with their children elements (like entire sections of our page). 

We're just clicking and dragging the elements right where we want them to go...within the Navigator.

And that’s it! To sum it all up: We can use the Navigator to select elements, 

get a visual representation of the page hierarchy — the organization, 

and, of course, we can click and drag to move and reorganize elements.

That's a high-level overview of the Navigator in Webflow.