https://github.com/kwhitley/svelte-navlink-action

Minimalist Svelte action to inject .active class in route-matched links.
https://github.com/kwhitley/svelte-navlink-action

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/kwhitley/svelte-navlink-action
• Owner: kwhitley
• Created: 2022-09-29T04:59:00.000Z (over 2 years ago)
• Default Branch: v0.x
• Last Pushed: 2022-12-29T18:43:34.000Z (over 2 years ago)
• Last Synced: 2024-04-14T05:46:29.051Z (about 1 year ago)
• Language: TypeScript
• Size: 67.4 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

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

  import { navlink } from 'svelte-navlink-action'



  
Home

  
Foo (and children)

  
Foo (exact)

  
foo/1

  
foo/2

  
foo/3



  a:global(.active) {

    color: red;

  }

```

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