It can sometimes get complicated finding your way around a complex webpage filled with elements. Select Structure to open the Navigator, which displays the page’s structure using a navigation tree panel. The panel provides easy access to every element on the canvas with just one click. You can also use the Navigator to rearrange the elements on a page by dragging and dropping them.
The Navigator is particularly useful for long pages or pages with complex multi-layered design, and for elements combining Z-Index, minus margin, position absolute, etc. It allows you to access element handles that may be positioned behind other elements.
Access Navigator
You can access Navigator in one of 3 simple ways:
- Right-click any element and then click Structure. This will automatically redirect you to the specific element in the navigation tree.
- Click on the Structure icon on the top bar.
- Use the Cmd/Ctrl + I keyboard shortcut.
Choose an element to edit
Click once on any element in the Navigator to immediately scroll to its Edit panel.
Rearrange elements
Drag any element up or down and drop before or after any other element.
![Use page structure to navigate your page 6 Gif for moviing section Use page structure to navigate your page 5](https://elementor.com/help/wp-content/uploads/2020/03/Gif-for-moviing-section.gif)
Right-click options
Right-click an element to enable all of its normal right-click menu options, such as Edit, Duplicate, Copy, Paste, etc.
![Use page structure to navigate your page 8 right click layer Use page structure to navigate your page 7](https://elementor.com/help/wp-content/uploads/2020/04/right-click-layer.jpg)
Hide / Show elements
Click the elementβs View button to show or hide the element, enabling you to better focus on design.
![Use page structure to navigate your page 12 Navigator Eye Use page structure to navigate your page 11](https://elementor.com/help/wp-content/uploads/2021/05/Navigator-Eye.jpg)
Note: This will not affect the front end of your website.
Name elements
- Double-click the element name. The area will change to a blue highlight, indicating you are in insert/edit mode.
- Type a custom name to help you easily identify the element at a later time.
![Use page structure to navigate your page 14 file iVIOXVjAAc Use page structure to navigate your page 13](https://elementor.com/help/wp-content/uploads/2020/04/file-iVIOXVjAAc.gif)
Collapse/Expand one element
Click an individual elementβs arrow button to expand or collapse that element.
![Use page structure to navigate your page 16 expand collapse layers Use page structure to navigate your page 15](https://elementor.com/help/wp-content/uploads/2020/04/expand-collapse-layers.gif)
Collapse/Expand all elements
Click the up or down
arrow button in the upper left of the Navigator panel to expand or collapse all of the elements at one time.
Identify elements with special conditions
Elements in the Navigator that contain special conditions are marked with a black line on the right edge.
- Hover over the black line to show the special condition.
Special conditions include:
- Display Conditions:
- Motion Effects:
- Absolute Positioning:
- Custom CSS:
Position Navigator panel
Float
Drag the Navigator panel anywhere on the page
Dock
Pin the Navigator panel to the side of the screen by dropping it inside the vertical blue drop zone that appears when the panel is dragged near the right side of the screen.
![Use page structure to navigate your page 32 file Use page structure to navigate your page 31](https://elementor.com/help/wp-content/uploads/2020/04/file-9omffx2fGl.gif)