---
title: "Navigation - Tab Strip"
---
# Navigation - Tab Strip
>
>
The [Tab Strip](appendix\components\vision-components\buttons\tab-strip\tab-strip.md) is a simple navigation strategy used for small project structures having only a few windows. It allows users to see all the navigation tabs on the first screen of the runtime. It is most commonly used in a docked window to provide automatic window navigation. The Tab Strip works by clicking on a tab to swap one main window for another. The Tab Strip has two navigation modes:
* **Swap Windows** - the Tab Strip automatically calls [system.vision.swapTo()](appendix\scripting-functions\system-vision\system-vision-swapTo.md) with the name of the selected tab for easy navigation from one window to another.
* **Disabled** - the Tab Strip doesn't do anything when a tab is pressed. Users can customize tabs using property bindings or by responding to the [propertyChange](ignition-modules/vision/scripting-in-vision/component-events/component-events.md#property-event-handlers) scripting event.
A Tab Strip is an effective primary navigation strategy, particularly when you don't have many items to choose from.
## Tab Strip Navigation Example
Tab Strip navigation is simple to set up. In the following example, we'll set up a small project that has a few windows which are visible on the navigation tabs.
1. Add a Tab Strip component to a window, typically a docked window.
2. Right-click on the tab component, choose **Customizers** > **Tab Strip Customizer**.
3. In the Tab Strip Customizer you can specify which window to open with each tab. Notice the **Tabs** component has a **Navigation Mode** property which is set to **Swap Windows**.
4. To create a new tab, click **Add Tab** (this example creates a Main Window 2 tab). If you have a tab already selected, clicking the **Add Tab** button creates a duplicate of the selected tab.
:::note Main Windows already created
This step assumes you already have your main windows created in your Project Browser.
:::
1. Under **Window Name** dropdown list, select the window you want to open. Note it is the full path from the window and not just the name (i.e., **Main Windows/Main Window 2**).
2. Enter the **Display Name** for your new tab (i.e., **Main Window 2**).
3. With the **Move Up**, **Move Down**, and **Remove Tab** buttons you can move tabs up and down on the tab strip, and remove a tab if it is no longer required.
4. You can also set the **Background** and **Foreground** colors when to show when a tab is selected and unselected.
5. When you're finished, press **OK**.
5. **Save** your project.
6. Open your project in the **Client** and confirm each tab navigates to a different window.
