> 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/layout.md).

# Layout

How to set up and organize your app.

## From Idea to App 

To go from an idea to app, we strongly recommend that you sketch out your vision using the below app templates. It's important to first create a roadmap for how people will interact with your app. 

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LhI4N8W4WrpuRYLw2XG%2F-LhI6iRmVOBjHTR3wSpF%2Fimage.png?alt=media\&token=5b3366bd-3b10-44d0-9820-e5b55739a7ba)

## Navigator Tutorial

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

## Arrange Screens with Navigators

Most apps navigate through screens using navigators. Click [here](https://www.youtube.com/watch?v=Z9R_kg4ew2M) to watch a tutorial on how to use each navigator.&#x20;

Here are three examples of navigators that you can use on Thunkable.

1. [**Bottom**](https://docs.thunkable.com/bottom-tab-navigator) **and** [**Top Tab**](https://docs.thunkable.com/top-tab-navigator) **Navigators** - These navigators allow you to change screens by clicking on icons at the top or bottom of the screen.&#x20;

![Top Tab Navigator](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lhqy-VdAehmUOnpqngj%2F-Lhr-UqCNyL69H8H7CJC%2Fimage.png?alt=media\&token=64681406-362f-46c1-8c0e-be33cee30a2b)

**2.** [**Drawer Navigators**](https://docs.thunkable.com/drawer-navigator) - A navigator that pulls out a side menu of different options to choose from.&#x20;

![](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)

**3.** [**Stack Navigators**](https://docs.thunkable.com/stack-navigator) - Navigators that allow you to stack screens on top of other screens.

## Layout Components

{% content-ref url="/pages/-LZ7M7cot04-8op8PytZ" %}
[Top Tab Navigator](/snap-to-place/top-tab-navigator.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7cphE4VrqW3QNN\_" %}
[Bottom Tab Navigator](/snap-to-place/bottom-tab-navigator.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7csZfTPKHHXz3SY" %}
[Stack Navigator](/snap-to-place/stack-navigator.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7crUnxWEiVveMmK" %}
[Drawer Navigator](/snap-to-place/drawer-navigator.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7clmxHDn6f7qGvq" %}
[Screen](/snap-to-place/screen.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7cmwykqGn0\_edoj" %}
[Row](/snap-to-place/row.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7cnmHPGKBKofU7K" %}
[Column](/snap-to-place/column.md)
{% endcontent-ref %}