> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/drawer-navigator.md).

# Drawer Navigator

Navigate to different screens using a clickable drawer that slides out from the side.

## Video Tutorial

You can watch a video tutorial for using Navigators in your Thunkable app here:

{% embed url="<https://www.youtube.com/watch?v=TqIVHGYdi54>" %}

## Adding Navigators

To add a navigator to your app, click **Screens +** at the top of your component tree. \
Select **Add Navigator** and select the Navigator you want to add.

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fp4nmTY9jVdLGKTdg1RAT%2Fadd%20screen%20%3E%20add%20navigator%20menu.png?alt=media&amp;token=3d2466d2-ba5e-4824-a3f6-91ab82720bd2" alt=""><figcaption></figcaption></figure>

## Add Screens to the Drawer Navigator

Within the component tree, drag and drop screens to nest them under the Drawer Navigator component.

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fvz4LpMxwY8lOZmAqOmyu%2F2023-02-27_11-22-07%20\(1\).gif?alt=media\&token=54edf115-c37a-421e-8b24-1825a104ee1f)

## Screen-Specific Drawer Navigator Properties

Once a screen has been added to the drawer navigator, a new section in the screen's properties panel, **Drawer Navigation Options**, becomes available. This is where you define the screen's label that displays in the user's drawer navigator.

## Drawer Navigator Properties

You have many options for styling your Drawer Navigator, such as changing the background color or tint color. Here are the different options for customization:

| Property                  | Description                                     | Data Type                        |
| ------------------------- | ----------------------------------------------- | -------------------------------- |
| Drawer Width              | The width of the Drawer in pixels.              | Number                           |
| Drawer Position           | The position the Drawer enters the screen from. | Select from menu (left or right) |
| Active Tint Color         | Text color of selected drawer.                  | Color                            |
| Active Background Color   | Background color of selected drawer.            | Color                            |
| Inactive Tint Color       | Text color for unselected drawers.              | Color                            |
| Inactive Background Color | Background color for unselected drawers.        | Color                            |