Anchor link component for Svelte.
# npm
npm i -D svelte-link
# pnpm
pnpm i -D svelte-link
# Bun
bun i -D svelte-link
# Yarn
yarn add -D svelte-link
<script>
import Link from "svelte-link";
</script>
<Link href="https://github.com/">GitHub</Link>
Because event modifiers cannot be used on Svelte components, use the mouse event in the forwarded on:click
event to prevent the default behavior.
<Link
href="https://github.com/"
on:click={(e) => {
e.preventDefault();
}}
>
GitHub
</Link>
outbound
is an alias for setting target="_blank"
. If rel
is not specified for outbound links, rel="noopener noreferrer"
is set.
outbound
defaults to true
if href
points to an external URL. You can override this behaviour by explicitly setting outbound
to false
.
<Link href="https://github.com/" outbound>GitHub</Link>
<!-- same as -->
<Link href="https://github.com/" target="_blank" rel="noopener noreferrer">
GitHub
</Link>
Inspired by Sapper, if the non-standard rel="prefetch"
is present, this component will make a GET request to the href
value when the user hovers over the link.
<Link href="/about" rel="prefetch">About</Link>
Setting disabled
to true
will render a span
element instead of an anchor tag.
<Link disabled href="https://github.com/">GitHub</Link>
<!-- <span>GitHub</span> -->
Set active
to true
to signal an active state.
If true
, the anchor link is given an "active" class with the aria-current
attribute set to "page."
<script>
import { page } from "$app/stores";
</script>
<Link href="/" active={$page.url.pathname === "/"}>GitHub</Link>
<!-- <a href="/" class="active" aria-current="page">GitHub</a> -->
Prop | Type | Default value |
---|---|---|
href | string |
"javascript:void(0);" |
disabled | boolean |
false |
outbound | boolean |
undefined |
target | string |
undefined |
rel | string |
undefined |
active | boolean |
false |