The Navigator window provides a compact view of the currently selected file and simplifies navigation between different parts of the file.
For HTML files you can see a Document Object Model (DOM) tree that displays the logical structure of the selected document.
You can open the Navigator window by choosing Window > Navigating > Navigator (Ctrl-7). By default, the Navigator window opens in the lower left corner of the IDE. To display a source file in the Navigator window, select the file in the Source Editor, the Projects window, the Files window, or the Favorites window. Once a file is displayed, you can use the Navigator window to focus on a specific nodes contained in the document. To do so, double-click a given node in the Navigator window, and your cursor automatically relocates to the corresponding element in the document.
When your cursor is in an element in a document the corresponding node is highlighted in the DOM tree in the Navigator window.
When you run an HTML5 project in a browser with NetBeans integration the Navigator window will also display elements in the HTML file that are generated dynamically. When you enable Inspect mode in the browser you can select or place your cursor over a page element in the browser and the corresponding element is selected or highlighted in the Navigator window.
You can also right-click elements in the DOM tree and set JavaScript DOM breakpoints by choosing the type of breakpoint in the popup menu.