Webflow's Navigator gives you a handy visual way to interact with every element on a page, and understand how elements relate to each other in the document's hierarchy. In this video, we'll show you how you can use the Navigator to:
Select an element
Understand hierarchical relationships between elements
Move elements
The Navigator gives us a visual way to interact with each and every element on a given page. And we’ll cover three main features of the Navigator: Selection, Hierarchy, and Movement.
Let’s start with selection:
As you hover over different elements in the Navigator, the corresponding elements on the Canvas will highlight. Same thing from the Canvas! If we hover over elements on the Canvas, they highlight in the Navigator.
And of course if we click on an element in the Navigator, we’ve effectively selected it. We can go over to the Style panel and we have all the options there. We can go over to element Settings, and make changes there, too. Anything we select in the Navigator, it’s the same as clicking on that element from the Canvas itself.
If we select something that’s outside our current view? Something outside the visible part of the Canvas? It’ll take us right there; it'll slide right to that element.
Now what about things that are challenging or even impossible to select on the Canvas? If we select our heading here, and we set that heading to display:none? Now it's just hanging out there somewhere in space. It still exists, but there's no way to select it on the Canvas.
Well? The Navigator's the way to go. Again, it shows us and lets us select each and every element. So if we want to switch it back so it's no longer set to display:none? That's fine.
But it’s more than just a fancy way to select elements. That leads us to the second big feature of the Navigator: And that’s hierarchy. It’s a really effective way to get an idea of your page hierarchy: which elements are nested inside other elements. And you can get as granular as you want with this. Of course, you can expand or collapse parent elements to see what’s inside. Each deeper level — each time you go down from a parent view to a child view, the elements become indented.
And if it’s getting too detailed for you and you want to go back to a more top-level view? Just press Collapse All. Want to go back to the most detailed view possible? Expand All. A full view of everything on your page, in order, nested.
That’s hierarchy in the Navigator.
Finally, let’s talk about movement. The Navigator is a quick way to move elements around on the page. We can reorganize sibling elements really easily — elements that share the same parent. We just drag the element right where we want it to go.
And it doesn’t matter if it’s a lone element or it has children. We can move entire sections of our page — sections that have their own child elements — we can move these just as easily.
And we can change up the hierarchy, too. Want to move an element outside of its parent? Sometimes that can be challenging when items are similarly sized on the Canvas. We just move the element outside of its parent.
Want to nest an element inside something else? We just move that element inside something else. As always, the Navigator gives us that control.
And that’s it! 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 right from the Navigator.
