# svelte-navlink-action

> Minimalist Svelte action to inject .active class in route-matched links.

Latest version **0.2.0** (published 2022-12-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-navlink-action
pnpm add svelte-navlink-action
yarn add svelte-navlink-action
bun add svelte-navlink-action
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2022-12-29 |
| First published | 2022-09-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 5.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Kevin R. Whitley |
| Maintainers | krwhitley |
| Keywords | svelte, action, active, link, class |

## Links

- npm: https://www.npmjs.com/package/svelte-navlink-action
- Repository: https://github.com/kwhitley/svelte-navlink-action
- Issues: https://github.com/kwhitley/svelte-navlink-action/issues
- npm.io page: https://npm.io/package/svelte-navlink-action

## Recent versions

- 0.2.0 (latest) — 2022-12-29
- 0.1.5 — 2022-09-30
- 0.1.4 — 2022-09-29
- 0.1.3 — 2022-09-29
- 0.1.2 — 2022-09-29
- 0.1.1 — 2022-09-29

## README

# svelte-navlink-action

[![Version](https://img.shields.io/npm/v/svelte-navlink-action.svg?style=flat-square)](https://npmjs.com/package/svelte-navlink-action)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/svelte-navlink-action?style=flat-square)](https://bundlephobia.com/result?p=svelte-navlink-action)
![Build Status](https://img.shields.io/github/workflow/status/kwhitley/svelte-navlink-action/build?style=flat-square)
[![Open Issues](https://img.shields.io/github/issues/kwhitley/svelte-navlink-action?style=flat-square)](https://github.com/kwhitley/svelte-navlink-action/issues)

[![Discord](https://img.shields.io/discord/832353585802903572?style=flat-square)](https://discord.com/channels/832353585802903572)
[![GitHub Repo stars](https://img.shields.io/github/stars/kwhitley/svelte-navlink-action?style=social)](https://github.com/kwhitley/svelte-navlink-action)
[![Twitter](https://img.shields.io/twitter/follow/kevinrwhitley.svg?style=social&label=Follow)](https://www.twitter.com/kevinrwhitley)

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

## Example

###### // Component.svelte

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

| Name    | Type(s)   | Default   | Description                                                                                    |
| ------- | --------- | --------- | ---------------------------------------------------------------------------------------------- |
| `exact` | `boolean` | **false** | Requires an exact url match if set to true, otherwise will match off the base-path of the url. |

---
_Source: https://npm.io/package/svelte-navlink-action · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._