Skip to content

<Tabs> with anchors reloads entire page on navigation #4196

@Tinggaard

Description

@Tinggaard

Current Behavior

When using anchors in the <Tabs> component, the entire page reloads on navigation.
On hover, the SvelteKit invalidation works as intended, and there is a moment after the navigation where it seems to work, but then the entire page reloads.

Expected Behavior

The app should not have to reload everything, just the necessary invalidated load functions.

Steps To Reproduce

Bind the value of <Tabs> to page.url.pathname, and then have anchors inside <Tabs.Trigger>, and have the body of the children of the +layout.svelte file act as the <Tabs.Content>, like such:

<Tabs value={page.url.pathname}>
  <Tabs.List>
    <Tabs.Trigger value="/foo">
      {#snippet element(attributes: Record<string, unknown>)}
        <a href="/foo" {...attributes}> Foo </a>
      {/snippet}
    </Tabs.Trigger>

  <!-- ... -->
  </Tabs.List>

  {@render children?.()}
</Tabs>

Then, navigate the tabs, and observe that everything around the tabs also reload.

Stackblitz or Reproduction URL

https://www.sveltelab.dev/?provider=github&owner=tinggaard&repo=skeleton-tabs-navigate

Environment Information

System:
  OS: Linux 6.17 Arch Linux
  CPU: (16) x64 AMD Ryzen 7 8845HS w/ Radeon 780M Graphics
  Memory: 7.25 GB / 27.15 GB
  Container: Yes
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 25.2.1 - /usr/bin/node
  npm: 11.6.4 - /usr/bin/npm
  pnpm: 10.23.0 - /usr/bin/pnpm
Browsers:
  Brave Browser: 139.1.81.137
  Chromium: 142.0.7444.175
  Firefox: 145.0.2
  Firefox Developer Edition: 145.0.2
npmPackages:
  @skeletonlabs/skeleton: ^4.7.1 => 4.7.1 
  @skeletonlabs/skeleton-svelte: ^4.7.1 => 4.7.1 

More Information

I know that using tabs for navigation is an anti-pattern, but this used to work in Skeleton v3, and I would really like to have this available when we migrate to v4, until we find a better solution in the team.

Metadata

Metadata

Assignees

Labels

documentationImprovements or additions to documentation

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions