Qwik City - 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 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 apart of the stack.