svelte-navlink-action

Minimalist Svelte action to simply inject an active class into route-matched links. Styling is up to you!

Example

// Component.svelte

<script>
  import { navlink } from 'svelte-navlink-action'
</script>

<!-- MARKUP -->
<ul>
  <li><a href="/" use:navlink={{ exact: true }}>Home</a></li>
  <li><a href="/foo" use:navlink>Foo (and children)</a></li>
  <li><a href="/foo" use:navlink={{ exact: true }}>Foo (exact)</a></li>
  <li><a href="/foo/1" use:navlink>foo/1</a></li>
  <li><a href="/foo/2" use:navlink>foo/2</a></li>
  <li><a href="/foo/3" use:navlink>foo/3</a></li>
</ul>

<!-- STYLES -->

<!-- alternatively just add the appropriate .active class styles to an imported stylesheet -->
<style>
  a:global(.active) {
    color: red;
  }
</style>

API

use:navlink || use:navlink={{ exact?: boolean = false }}