# Create multiple top-level layouts in Remix

Used: @remix-run-dev@2.0.0

If you're building a Remix application, most likely you have found yourself needing most routes to have a specific layout (e.g. a header at the top with a navigation) while other routes shouldn't have any layout (e.g. the login/signup routes) and use a different one (e.g. a dashboard section).

One common way to solve this is the React way, that is, to add the Layout component on every route that needs it.

Another way is to use the `handle` export to let routes decide if they want or not the layout, this is similar to how layouts worked in Next Pages Router.

But in Remix there's a more Remix way to do it, which uses the file system.

Using the example above of a index plus other routes, login and dashboard section, having different layouts, we can create the following file structure:

```txt
app/routes/_.tsx
app/routes/_._index.tsx
app/routes/_.about.tsx
app/routes/dashboard.tsx
app/routes/dashboard.users.tsx
app/routes/dashboard.articles.tsx
app/routes/login.tsx
```

Here `app/routes/_.tsx` is a pathless layout route, this route will not add any segment to the URL, but any routes with `_.` in the name will be nested inside, and that's what we do on `app/routes/_._index.tsx` and `app/routes/_.about.tsx`.

Both routes are nested inside our pathless layout route, but because the pathless adds no URL segment, the will handle the URLs `/` (for `app/routes/_._index.tsx`) and `/about` (for `app/routes/_.about.tsx`).

The next layout is `app/routes/dashboard.tsx`, this is a normal route, it add `/dashboard` to the URL and can have nested routes. Since it's named `dashboard.tsx` and not `_.dashboard.tsx` it's not nested inside the pathless layout.

Any route starting with `dashboard.` in the file name will be a child route of `app/routes/dashboard.tsx`, this is the case of `app/routes/dashboard.users.tsx` and `app/routes/dashboard.articles.tsx`.

Finally, we have `app/routes/login.tsx`, this route is neither nested inside `_.` or `dashboard.`, so it doesn't re-use any of the layout. As long as our `app/root.tsx` doesn't add any UI and only focus on the basic document and context providers, this route will have full control over the UI.