← SvelteKit Course4 / 12

Linking & Navigation

Move between routes with plain links that SvelteKit enhances, navigate from code with goto, and highlight the active link.

Ad 728×90

Links are just <a> tags

Why: you write a normal <a href>, and SvelteKit upgrades it — it intercepts the click for a fast client-side transition (no full page reload) and preloads the target on hover. No special component needed.

<!-- Anywhere in a .svelte file -->
<nav>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
</nav>

Navigate from code

Why: sometimes you navigate after an event, not a click — e.g. after a form succeeds. goto() does that from your script. Note: import it from $app/navigation.

<script lang="ts">
  import { goto } from '$app/navigation'

  function search() {
    goto('/results?q=svelte')
  }
</script>

<button onclick={search}>Search</button>

Highlight the active link

Why: to mark which nav link matches the current page, compare it to the current URL. The page state from $app/state always holds the live URL.

<script lang="ts">
  import { page } from '$app/state'

  let href = '/blog'
</script>

<a {href} aria-current={page.url.pathname === href ? 'page' : undefined}>
  Blog
</a>

Control preloading

Why: SvelteKit preloads pages on hover by default. You can tune this with a data attribute — "tap" waits until the user presses, saving bandwidth on huge lists; "hover" is the default eager behavior.

<!-- Preload only when the user starts tapping/clicking -->
<a href="/blog" data-sveltekit-preload-data="tap">Blog</a>

<!-- Or set it once on a wrapper to cover all links inside -->
<div data-sveltekit-preload-data="hover">
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</div>