Nested Layout

Most times it is desirable to nest layouts into each other. A page's content can be nested in numerous wrapping layouts, which is determined by the directory structure.

src/
└── routes/
    ├── layout.tsx           # Parent layout
    └── about/
        ├── layout.tsx       # Child layout
        └── index.tsx        # https://example.com/about

In the above example, there are two layouts that apply themselves around the /about page component.

1. src/routes/layout.tsx
2. src/routes/about/layout.tsx

In this case, the layouts will nest each other with the page within each of them.

┌────────────────────────────────────────────────┐
│       src/routes/layout.tsx                    │
│  ┌──────────────────────────────────────────┐  │
│  │    src/routes/about/layout.tsx           │  │
│  │  ┌────────────────────────────────────┐  │  │
│  │  │ src/routes/about/index.tsx         │  │  │
│  │  │                                    │  │  │
│  │  └────────────────────────────────────┘  │  │
│  │                                          │  │
│  └──────────────────────────────────────────┘  │
│                                                │
└────────────────────────────────────────────────┘

// File: src/routes/layout.tsx
export default component$(() => {
  return (
    <main>
      <Slot /> {/* <== Child layout/route inserted here */}
    </main>
  );
});

// File: src/routes/about/layout.tsx
export default component$(() => {
  return (
    <section>
      <Slot /> {/* <== Child layout/route inserted here */}
    </section>
  );
});

// File: src/routes/about/index.tsx
export default component$(() => {
  return <h1>About</h1>;
});

The above example would render the html:

<main>
  <section>
    <h1>About</h1>
  </section>
</main>

The default is that a page will create its layout stack by climbing up each directory until it gets to the src/routes directory. If at any point it should stop climbing up the directories you can use the top layout feature.