Cleaned up, more legible navigator

<p>Because one UI <a href="<https://webflow.com/blog/meet-the-new-style-panel>" data-rt-link-type="external">redesign</a> in a week wasn’t enough, we’ve also made some small updates to the <a href="<https://university.webflow.com/article/navigator>" data-rt-link-type="external">navigator</a>.</p><p>Why make the change? Well, the <a href="<https://university.webflow.com/article/navigator>" data-rt-link-type="external">navigator</a> is a great way to understand the structure of your page and see all elements in a single, organized place. But when your page structure gets complex, this view can get hard to parse.</p><figure class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center" data-rt-max-width="800px" style="max-width:800px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c667fIGYdSaZ47JIoIXJTWty2kVBTZWnqkglXSBgSdUYhyc-P-xzbAUU3vctxWQiKYebBvMoVMDgDoOZpzXOZ5eb6_yAmici358-we-NpTyKxSgqZldiMZSR2vIhyzlN87QAEXFxIFH.jpeg>"></div><figcaption>Those little vertical lines are reeeeeeal nice.</figcaption></figure><p>And so, to make this view more legible and organized, we’ve done a bit of cleanup. A quick rundown of the changes:</p><ul><li>More efficient use of horizontal space to decrease horizontal scrolling</li><li>New vertical lines to more clearly mark the relationship between elements</li><li>Removed horizontal lines to reduce clutter</li></ul><p>You can also click on the arrow <em>or</em> the element icon to expand and collapse elements, instead of only the arrow. So that slightly larger click target should make life easier as well.</p><p>Hope you like it! Let us know what you think in <a href="<https://forum.webflow.com/t/cleaned-up-more-legible-navigator/76581>" data-rt-link-type="external">the forum</a>.</p><p>P.S. While we’re on the subject of element hierarchy, did you know you can use the up and down arrow keys to jump between the child and parent elements? And yep, you guessed it: you can use the left and right keys to jump between sibling elements.</p><p>P.P.S. We’ve got a ton more <a href="<https://university.webflow.com/article/keyboard-shortcuts-in-the-webflow-designer>" data-rt-link-type="external">keyboard shortcuts</a>. So get involved.</p>