# Page Layouts

> Let editors choose different layouts for individual pages using a template field.

Source: https://emdashcmseverything.com/official-docs/guides/page-layouts/

Let editors pick one page template, for example Default, Full Width, or Landing Page. A `select` field stores the choice, and the page route maps that value to an Astro layout component. Use a [`blocks` field](https://emdashcmseverything.com/official-docs/guides/blocks/) when editors need to compose and reorder several sections within one page.

## How it works

1. Add a `template` select field to your pages collection
2. Create layout components for each option
3. Map the field value to a layout in your page route

This uses EmDash's select field and Astro's component model.

## Add the field

In the admin UI, add a select field to your pages collection with slug `template` and your layout options (for example, "Default" and "Full Width"). To define the same field in seed data, add the following object to the collection's `fields` array:

```json title=".emdash/seed.json"
{
  "slug": "template",
  "label": "Template",
  "type": "select",
  "validation": {
    "options": ["Default", "Full Width"]
  },
  "defaultValue": "Default"
}
```

## Create layout components

Each layout wraps content in your base layout with different styling:

```astro title="src/layouts/PageDefault.astro"
---
import type { ContentEntry, InferCollectionData } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "./Base.astro";

interface Props {
  page: ContentEntry<InferCollectionData<"pages">>;
}

const { page } = Astro.props;
---

<Base title={page.data.title}>
  <article class="page-default">
    <h1>{page.data.title}</h1>
    <PortableText value={page.data.content} />
  </article>
</Base>

<style>
  .page-default {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 2rem 1rem;
  }
</style>
```

```astro title="src/layouts/PageFullWidth.astro"
---
import type { ContentEntry, InferCollectionData } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "./Base.astro";

interface Props {
  page: ContentEntry<InferCollectionData<"pages">>;
}

const { page } = Astro.props;
---

<Base title={page.data.title}>
  <article class="page-wide">
    <h1>{page.data.title}</h1>
    <PortableText value={page.data.content} />
  </article>
</Base>

<style>
  .page-wide {
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: 2rem 1rem;
  }
</style>
```

## Wire up the route

In your page route, import each layout and map the template value:

```astro title="src/pages/pages/[slug].astro"
---
import { decodeSlug, getEmDashEntry } from "emdash";
import PageDefault from "../../layouts/PageDefault.astro";
import PageFullWidth from "../../layouts/PageFullWidth.astro";

const slug = decodeSlug(Astro.params.slug);

if (!slug) {
  return Astro.rewrite("/404");
}

const { entry: page } = await getEmDashEntry("pages", slug);

if (!page) {
  return Astro.rewrite("/404");
}

const layouts = new Map([
  ["Default", PageDefault],
  ["Full Width", PageFullWidth],
]);

const Layout = layouts.get(page.data.template ?? "") ?? PageDefault;
---

<Layout page={page} />
```

The route stays small. Each layout component owns its own markup and styling. Adding a layout is: create a component, add the option to the select field, add a line to the map.

> **Tip**
>
> Use human-readable option names like "Full Width" rather than slugs like "full-width". The value
> is both the stored value and the admin dropdown label.

## Adding more layouts

Common layout choices:

- **Default** — narrow content column, good for reading
- **Full Width** — wider content area, no sidebar
- **Landing Page** — no header/footer, hero sections
- **Sidebar** — content with a [widget area](https://emdashcmseverything.com/official-docs/guides/widgets/) beside it

Each is just another Astro component in your `src/layouts/` directory and another entry in the route's layout map.