Layout

Layouts

  • A layout wraps every page in its folder and all folders below it.
  • Layouts nest and inherit. They do not replace the parent.
  • Children appear with {@render children()} (Svelte 4 used <slot />).
  • To break out: layout groups (group) or a reset like [email protected]
File nameWhich layout the page uses
[email protected]The root layout only
[email protected]The layout of the folder named admin, and the layouts above it
+page@(app).svelteThe layout of the group named (app)
+page.svelteThe normal chain: every layout from the root down to its folder
src/routes/
  +layout.svelte                 (root: site header)
  admin/
    +layout.svelte               (admin: side menu)
    users/
      +layout.svelte             (users: tabs)
      +page.svelte               → /admin/users          root → admin → users → page
      print/
        [email protected]            → /admin/users/print    root → page
        (side menu and tabs are skipped)