Anchors/forms inside Menu?

[colecrouter]

I've been trying the experimental Menu component, and I'm struggling with the API a bit. Here's what I have in mind:

Using the element snippet, I haven't found a way to embed a link or form inside of a Menu.Item without breaking the menu. Has anyone succeeded in doing something similar?

[endigo9740]

Hey @colecrouter, or course, we use anchors for our own header menus now. Here's a few examples:

• More: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/components/ui/header/plus.svelte
• Version: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/components/ui/header/version.svelte
• Sponsors: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/components/ui/header/sponsor.svelte

I'm assuming you would be using SvelteKit Form Actions for something like the Sign Out button, correct?
https://svelte.dev/docs/kit/form-actions

If so I'll defer to @Hugos68 for recommendations there. As he implemented this component and has the best handle around Svelte specifics like this.

And this does seem like a common use case, so may be ripe for new examples on our end. I'd encourage a PR from anyone willing and able.

[Hugos68]

@colecrouter Hello 👋, you were on the right track utilizing element for this, I've created an example here: https://stackblitz.com/edit/jxflf4aq?file=src%2Fapp.svelte

Let me know if that helps you or if anything is unclear!