Top Layout

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 not continue climbing up the directories you can use the "top" layout feature.

A top layout means that the layout is always at the very top of the nested layout stack, and doesn't keep collecting parent layouts, even when there are parent directory layouts.

A top layout is specified by ending the layout filename with !, such as layout!.tsx.

src/
โ””โ”€โ”€ routes/
    โ”œโ”€โ”€ layout.tsx              # Root layout
    โ””โ”€โ”€ docs/
        โ”œโ”€โ”€ layout!.tsx         # Docs layout
        โ”œโ”€โ”€ index.tsx           # https://example.com/docs
        โ””โ”€โ”€ api/
            โ””โ”€โ”€ index.tsx       # https://example.com/docs/api

In the above example, there are two layouts in the parent directories of src/routes/docs/api/index.tsx. By default, the /docs/api page would be nested inside both layouts (the Root and Docs layout).

However, since the src/routes/docs/layout!.tsx filename ends with !, then this layout becomes the very top layout and the Root src/routes/layout.tsx layout is not a part of the stack.

Made with โค๏ธ by