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.