---
title: Layouts
---

Not many websites consist of completely independent pages. For instance, this very guide (which was made with Rakkas, of course - so meta!) has a header, a footer, and a navigation menu that are common to all pages. Rakkas provides a nested layout system to handle this use case. If you create a file named `layout.jsx` (or `tsx`) that default exports a React component, pages in the same directory and pages or nested layouts in its subdirectories will be wrapped by the layout.

<CodeViewer
  name="guide-samples"
  openFiles={[
    "src/routes/layout/layout.tsx",
    "src/routes/layout/index.page.tsx",
    "src/routes/layout/about.page.tsx",
  ]}
  url="/layout"
/>

## Thematic grouping

Sometimes you want pages that don't share a common URL prefix to share a layout. You can group such pages under a directory with a name that starts with an underscore. The directory name will not be part of the URL path. For example you could have a directory structure like this:

- `routes/`
  - `layout.jsx` (the root layout, common to all pages)
  - `_app/` (thematic group for most pages)
    - `layout.jsx` (common layout for most pages)
    - `page.jsx` (path: `/`)
    - `about.page.jsx` (path: `/about`)
    - `blog.page.jsx` (path: `/blog`)
  - `_admin` (thematic group for admin pages)
    - `layout.jsx` (common layout for admin pages)
    - `settings.page.jsx` (path: `/settings`)
    - `users.page.jsx` (path: `/users`)
