Qwik City - Named Layout

At times related routes need to have drastically different layouts from their siblings. It is possible to define multiple layouts for different sibling routes. A single default layout and any number of named layouts. The child route can then request a specific named-layout.

Qwik City defines the convention that layouts are within src/routes and the filename starts with layout. That's why the default layout is namend layout.tsx. A named layout also starts with layout followed by a dash - and a unique name, such as layout-narrow.tsx.

- src/
  - routes/
    - contact/
      - index@narrow.tsx  # https://example.com/contact (Layout: layout-narrow.tsx)
    - layout.tsx          # Default layout
    - layout-narrow.tsx   # Default named layout
    - index.tsx           # https://example.com/ (Layout: layout.tsx)

    - contact@narrow.tsx  

• https://example.com/

  +--------------------------------------------------+
  |       src/routes/layout.tsx                      |
  |  +--------------------------------------------+  |
  |  |    src/routes/index.tsx                    |  | 
  |  |                                            |  |
  |  +--------------------------------------------+  |
  |                                                  |
  +--------------------------------------------------+
  

• https://example.com/contact

  +--------------------------------------------------+
  |       src/routes/layout-narrow.tsx               |
  |  +--------------------------------------------+  |
  |  |    src/routes/contact/index@narrow.tsx     |  | 
  |  |                                            |  |
  |  +--------------------------------------------+  |
  |                                                  |
  +--------------------------------------------------+