> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/sveltejs/kit/llms.txt > Use this file to discover all available pages before exploring further. # Link options and preloading > Customize link behavior with data attributes for faster navigation In SvelteKit, regular `` elements are used to navigate between routes. You can customize their behavior with `data-sveltekit-*` attributes to make your app feel faster. ## Overview SvelteKit intercepts clicks on `` elements whose `href` is owned by your app and handles navigation without a full page reload. You can customize this with data attributes. These options also apply to `
` elements with `method="GET"`. ## data-sveltekit-preload-data Before the browser registers a click, SvelteKit can detect hovers and touch events to get a head start on importing code and fetching data. Preloading starts when mouse hovers over link. On mobile, begins on `touchstart`. Preloading starts on `touchstart` or `mousedown` event. ### Default configuration The default template applies hover preloading to all links: ```html src/app.html theme={null}
%sveltekit.body%
``` ### Custom preloading ```html Tap-based preloading theme={null} Get current stonk values ``` ```html Disable for specific link theme={null}
Will preload Will preload
Won't preload
``` You can also programmatically invoke `preloadData` from `$app/navigation`: ```javascript theme={null} import { preloadData } from '$app/navigation'; preloadData('/about'); ``` Data will never be preloaded if the user has enabled reduced data usage (`navigator.connection.saveData === true`). ## data-sveltekit-preload-code Preload just the code for a route without fetching data. Links are preloaded immediately Links are preloaded when they enter the viewport Code is preloaded on hover (data is not) Code is preloaded on tap/mousedown (data is not) ```html theme={null} About ``` `viewport` and `eager` only apply to links present in the DOM immediately after navigation. Links added later (in `{#if ...}` blocks) won't preload until triggered by hover or tap. ## data-sveltekit-reload Force a full-page navigation instead of client-side routing: ```html theme={null} Path ``` * Loading resources that SvelteKit shouldn't handle * Integrating with legacy server-rendered pages * Forcing a complete page refresh Links with `rel="external"` receive the same treatment and are ignored during prerendering. ## data-sveltekit-replacestate Replace the current history entry instead of creating a new one: ```html theme={null} Path ``` Useful for modal dialogs or multi-step forms where you don't want each step in the browser history. ## data-sveltekit-keepfocus Keep focus on the current element after navigation: ```html theme={null}
``` Use sparingly and only on elements that still exist after navigation: * Avoid on `` tags (focus would be on the link, not previous element) * Only use if the element persists after navigation * Consider accessibility implications for screen readers ## data-sveltekit-noscroll Prevent scrolling to the top after navigation: ```html theme={null} Path ``` By default, SvelteKit: * Scrolls to `0,0` (top-left) after navigation * Scrolls to element with matching ID if link includes `#hash` * Preserves scroll position on back/forward navigation ## Combining options You can use multiple attributes together: ```html theme={null} Dashboard ``` ## Inheritance and overriding Attributes can be applied to parent elements and overridden on children: ```html theme={null} ``` ## Conditional attributes Apply attributes conditionally in Svelte: ```svelte theme={null}
``` ## Performance considerations **Pros:** Faster perceived navigation (200-300ms head start) **Cons:** Can cause unnecessary requests if users don't click **Best for:** Most content pages with stable data **Pros:** Only loads when user shows clear intent **Cons:** Slightly less head start (only 50-100ms) **Best for:** Pages with rapidly changing data or expensive queries **Pros:** Minimal bandwidth, code is cacheable **Cons:** Still need to fetch data on navigation **Best for:** Pages where data must be fresh **Pros:** No wasted requests **Cons:** Slower navigation **Best for:** Auth-protected routes or rate-limited APIs ## Programmatic preloading Preload routes in your JavaScript code: ```javascript Preload data theme={null} import { preloadData } from '$app/navigation'; // Preload when showing a tooltip function showTooltip() { preloadData('/user/profile'); } ``` ```javascript Preload code theme={null} import { preloadCode } from '$app/navigation'; // Preload code for all dashboard routes onMount(() => { preloadCode('/dashboard/*'); }); ``` View the complete `$app/navigation` API