svelte-link

NPM

GitHub repo

Anchor link component for Svelte.

Table of Contents

Installation

# npm
npm i -D svelte-link

# pnpm
pnpm i -D svelte-link

# Bun
bun i -D svelte-link

# Yarn
yarn add -D svelte-link

Usage

Basic

GitHub
<script>
  import Link from "svelte-link";
</script>

<Link href="https://github.com/">GitHub</Link>

Preventing the default behavior

Because event modifiers cannot be used on Svelte components, use the mouse event in the forwarded on:click event to prevent the default behavior.

GitHub 
<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.

GitHub GitHub 
<Link href="https://github.com/" outbound>GitHub</Link>

<!-- same as -->

<Link href="https://github.com/" target="_blank" rel="noopener noreferrer">
  GitHub
</Link>

Prefetch

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.

About
<Link href="/about" rel="prefetch">About</Link>

Disabled state

Setting disabled to true will render a span element instead of an anchor tag.

GitHub 
<Link disabled href="https://github.com/">GitHub</Link>

<!-- <span>GitHub</span> -->

Active state

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> -->

API

Props

Prop Type Default value
href string "javascript:void(0);"
disabled boolean false
outbound boolean undefined
target string undefined
rel string undefined
active boolean false

Forwarded events

Changelog

Changelog

License

MIT