> 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

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

![](/files/-LhI6iRmVOBjHTR3wSpF)

## 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](/files/-Lhr-UqCNyL69H8H7CJC)

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

![](/files/-LB2UnuFRfl9o4LrOc4O)

**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 %}