Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jpcutshall/svelte5-router/llms.txt

Use this file to discover all available pages before exploring further.

The links Svelte action is the bulk alternative to use:link. Instead of decorating every individual anchor, you apply use:links once to a parent element and it captures all relative anchor clicks inside that subtree through event delegation. This is ideal for application shells, CMS-rendered HTML, or any layout where individual anchors are dynamic and cannot easily be decorated one by one.

​
Import

import { links } from 'svelte5-router';

​
Usage

<div use:links>
  <!-- all relative <a> elements inside are automatically intercepted -->
</div>

​
Supported anchor attributes

Each individual <a> element inside the container can carry these attributes to customise its navigation behaviour:
AttributeTypeDefaultDescription
replaceboolean (presence)falsePasses replace: true to navigate, replacing the current history entry
preserveScrollboolean (presence)falsePasses preserveScroll: true to navigate, keeping the current scroll position
norouteboolean (presence)falseOpts this anchor out of the action entirely. The click is not intercepted and the browser handles it natively

​
How it works

The action attaches a single click listener to the container. On each click it:
  1. Walks up the DOM from event.target by traversing parentElement until it finds an element whose tagName is "A" (equivalent to a closest("A") walk, but implemented manually for broader compatibility).
  2. Checks the same interception conditions as use:link (same-origin, no modifier keys, target is "" or "_self", event.defaultPrevented is false).
  3. Additionally checks that the anchor does not have the noroute attribute.
  4. If all checks pass, calls event.preventDefault() and navigate(anchor.pathname + anchor.search, options).
Because the action uses event delegation, anchors added to the container after the initial render are still intercepted automatically — no re-mounting or re-applying the action is required.

​
Examples

<!-- App.svelte -->
<script lang="ts">
  import { links, Router, Route } from 'svelte5-router';
  import Home from './routes/Home.svelte';
  import About from './routes/About.svelte';
</script>

<div use:links>
  <Router>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/replace" replace>Replace this URL</a>
      <a href="/native" noroute>Use the native action</a>
    </nav>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
  </Router>
</div>
Concernuse:link (on <a>)use:links (on container)
Attachment pointIndividual <a> tagParent / wrapper element
Event listenersOne per anchorOne per container (event delegation)
Dynamic anchorsMust apply use:link to each new anchorAutomatically covered
Opt-outN/A — remove use:linkAdd noroute attribute to the anchor
Best forA handful of known, static linksNavigation sections, CMS content, generated link lists
Place use:links on the outermost element of your layout — often the <div> or <main> wrapping your <Router> — so that every relative anchor in the entire app is handled without any per-link decoration.
Avoid nesting multiple use:links containers. Because the action listens at the container level, a click on an anchor inside an inner container will bubble up and be handled twice (once by each container’s listener), resulting in navigate being called twice for the same click.

Build docs developers (and LLMs) love

Get started for freeTalk to us