---
title: "Navigation - Drill Down"
---
# Navigation - Drill Down
>
>
Another popular navigation strategy in Ignition is to drill down into various areas of your project using a map. The Drill Down navigation strategy is ideal if you have different geographical locations. A good example is to have a main window that has an image like a map or a background image representing a plant. The image has various components such as boxes, circles, etc., that overlay the image. When the user selects one of the overlay components, the Client swaps windows with a window that displays information that pertains to the selected area of the map or plant.
It is a very simple navigation strategy to setup and is popular because it lets people orient themselves on where they are located in the factory, and they can drill down into all these different sections very easily from one place.
## To Create a Navigation Drill Down in Designer
1. Drag an **image** on to a Main Window (this example uses a US Map).
2. Create a component such as a box, circle, star, etc., over an area on your image.
3. Right click the component (box, circle, etc.,) and select **Scripting**.
4. Select the [mousePressed](scripting\scripting-in-ignition\component-and-window-scripting\component-events.md#mouse-event-handlers) event handler, and with the **Navigation** tab selected:
1. Select the **Open/Swap** radio button.
2. From the **Window** drop-down box, select the window that relates to the selected area.
3. Click **OK**.
5. Select your US Map window and set it to **Open on Startup**.
:::note Area windows already created
This example assumes you already have your area windows created in your Project Browser.
:::
6. On your area window, add a [Button](visualization-and-dashboards\windows\navigation-windows\navigation-back-and-forward-buttons\navigation-back-and-forward-buttons.md) component to navigate you back to the main window (if you have multiple area windows, copy and paste this button to each window).
1. **Open** your area window.
2. Add a **Button** component.
3. Right click on the **Button** component and select **Scripting**.
7. Select the [mousePressed](scripting\scripting-in-ignition\component-and-window-scripting\component-events.md#mouse-event-handlers) event handler, and with the **Navigation** tab selected:
1. Select the **Open/Swap** radio button.
2. From the **Window** drop-down box, select the window that is your overview map.
3. Click **OK**.
8. To test your window navigation in the Designer, use the **Preview Mode** to switch between windows.
9. **Save and Publish** your project.
10. Now, try it out! Open your **Client**, and click on your special shape to navigate to the area selected. You'll notice that in the following example the Mouseover Text property was used to display the location information when you hover over one of the circles.
| Drill Down Navigation with Mouseover Text |
|---|
|  |
11. Click on the **US Map button** to take you back to the US Map.
| Area Window with US Map Back Button |
|---|
|  |