> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/layout.md).

# Layout

Gravity Web offers four versatile layout options. Layouts contain the common components to be rendered across all views that utilise that layout, for example: **navigation** and **header.**

### Preview

#### Account Layout

<figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FWXcXLQg1EAH92fO5IgBK%2Faccount_layout.png?alt=media&amp;token=8ca8a194-94d2-46a5-a44b-58ed18ad9eba" alt="Gravity account layout component"><figcaption></figcaption></figure>

#### App Layout

<figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FkDqFRySZeKQwqb6VLSrP%2Fdashboard_layout.png?alt=media&amp;token=ccef8f19-d50b-4249-b891-f151fe6a9f89" alt="Gravity app layout component"><figcaption></figcaption></figure>

#### Auth Layout

<figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2Fj5l90XrgA4p1Po0YHkgA%2Fauth_layout.png?alt=media&amp;token=96f8e387-8c07-4d05-b8d9-ce2ee5b702d5" alt="Gravity auth layout component"><figcaption></figcaption></figure>

#### Onboarding Layout

<figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FmiIkPcL0JSmRDm87iAQK%2Fonboarding_layout.png?alt=media&amp;token=95cbcf27-87c2-4c60-8d28-c5acb9a173e7" alt="Gravity onboarding layout component"><figcaption></figcaption></figure>

### Props

| Prop     | Description        | Required | Value        |
| -------- | ------------------ | -------- | ------------ |
| children | children to render | required | component(s) |
| title    | view title         | required | string       |

### Usage

You can use a layout by passing its name in the [route object](/gravity-web/routing.md).

```javascript
{
    path: '/dashboard',
    view: Dashboard,
    layout: 'app',
    title: 'account.index.title'
}
```