# Drawer Navigator

{% embed url="<https://youtu.be/Z9R_kg4ew2M>" %}

{% embed url="<https://youtu.be/734x_TpCCVk>" %}

## Adding Navigators

To add a navigator to your app, you will need to drag the navigator component into your component tree, and then drag a screen on top of the navigator component.&#x20;

![](/files/odMUwDMkq16vSIfxJEbi)

![](/files/-LB2UnuFRfl9o4LrOc4O)

## Name Your Drawers

To name your drawers, click on each screen and navigate to the Drawer label on the bottom right corner of the properties section.&#x20;

![](/files/gCBmNNs23BDGFSfgIJCR)

## 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:

* **Drawer Width:** Width of the Drawer in pixels
* **Drawer Position:** Position Drawer swipes out from: left or right
* **DrawerOptions**
  * **Active Tint Color:** Tint color for selected drawer.&#x20;
  * **Active Background Color:** Background color for selected drawer.
  * **Inactive Tint Color:** Text color for unselected drawers.&#x20;
  * **Inactive Background Color:** Background color for unselected drawer.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.thunkable.com/snap-to-place/drawer-navigator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.