> 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/snap-to-place/drawer-navigator.md).

# Drawer Navigator

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

{% 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;

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUe3rgJfvQYLrpDR1HfWv%2Fuploads%2FFTViuMNmUt0m9xVHWcwa%2Fstp_drawer_navigator.gif?alt=media\&token=d10b383e-a05b-4556-8895-8c090606ed03)

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LB2UmWU0aNj_RRTtfkl%2F-LB2UnuFRfl9o4LrOc4O%2FThunkable%20Documentation%20Exhibits%20\(83\).png?alt=media\&token=c47b73e1-6d11-408e-b2dd-26e271c47ebf)

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

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUe3rgJfvQYLrpDR1HfWv%2Fuploads%2FF225rfjkGwA2D5C9L7yl%2Fstp_drawer_label.png?alt=media\&token=980c6021-99a0-4fd8-b1ab-24e14ce7d911)

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