I am trying to create a dynamically updating navbar in SvelteKit, with the currently open section formatted accordingly. I am attempting to identify the page based on the first part of the path, as below:

__layout.svelte:

<script context="module">
    export const load = ({ page }) => {
        return {
            props: {
                currentSection: `${page.path}`.split('/')[0],
                sections: ['home', 'dashboard', 'settings']
            }
        };
    }
</script>

<div class="min-h-screen bg-gray-100">
    <Header {...props} />
    <slot />
</div>

Header.svelte

<script>
    import Menu from "$lib/nav/menu.svelte"
</script>

<Menu {...props}></Menu>

Menu.svelte

<script>
    export let sections;
    export let currentSection;
</script>

{#each sections as { section }}
    <a
        href="/{section}"
        class="{section == currentSection
            ? 'bg-gray-900 text-white'
            : 'text-gray-300 hover:bg-gray-700'} other-classes"
        >{section}</a
    >
{/each}

This is resulting in a props is not defined error, but I would have expected props to be defined since I've defined it in the return from the load() fundtion on the primary layout (based on the docs).

Do I somehow need to explicitly declare the props rather than expecting them to be available from the return of the load() function?

I am trying to create a dynamically updating navbar in SvelteKit, with the currently open section formatted accordingly. I am attempting to identify the page based on the first part of the path, as below:

__layout.svelte:

<script context="module">
    export const load = ({ page }) => {
        return {
            props: {
                currentSection: `${page.path}`.split('/')[0],
                sections: ['home', 'dashboard', 'settings']
            }
        };
    }
</script>

<div class="min-h-screen bg-gray-100">
    <Header {...props} />
    <slot />
</div>

Header.svelte

<script>
    import Menu from "$lib/nav/menu.svelte"
</script>

<Menu {...props}></Menu>

Menu.svelte

<script>
    export let sections;
    export let currentSection;
</script>

{#each sections as { section }}
    <a
        href="/{section}"
        class="{section == currentSection
            ? 'bg-gray-900 text-white'
            : 'text-gray-300 hover:bg-gray-700'} other-classes"
        >{section}</a
    >
{/each}

This is resulting in a props is not defined error, but I would have expected props to be defined since I've defined it in the return from the load() fundtion on the primary layout (based on the docs).

Do I somehow need to explicitly declare the props rather than expecting them to be available from the return of the load() function?

• javascript
• svelte
• svelte-ponent
• sveltekit

1 Answer 1

The props are passed from the module script to the regular ponent script, this means you still need to add export let props in your layout as well.

<script context="module">
  export const load = () => {
    return {
      props: {
        test: 123
      }
    }
  }
</script>

<script>
  export let test; //
</script>

Note that this will always spread out the props, you cannot do export let props and retrieve all the props, you can however get all the props passed to a ponent using $$props

Also, the load function is only available for pages and layouts, so you will for sure have to export props in both Header and Menu as those are just regular svelte ponents.