+layout.js

Just like +page.svelte loading data from +page.js, your +layout.svelte component can get data from a load function in +layout.js.

// src/routes/settings/+layout.ts
import type { LayoutLoad } from "./$types"
 
export const load = (() => {
  return {
    sections: [
      { slug: "profile", title: "Profile" },
      { slug: "notifications", title: "Notifications" },
    ],
  }
}) satisfies LayoutLoad

If a +layout.js exports page options — prerender, ssr and csr — they will be used as defaults for child pages.

Data returned from a layout’s load function is also available to all its child pages:

src/routes/settings/profile/+page.svelte
<script lang="ts">
  import type { PageData } from "./$types"
 
  export let data: PageData
 
  console.log(data.sections) // [{ slug: 'profile', title: 'Profile' }, ...]
</script>

Note

Often, layout data is unchanged when navigating between pages. SvelteKit will intelligently re-run load functions when necessary.