{"id":13722837,"url":"https://github.com/jacwright/svelte-navaid","last_synced_at":"2025-10-25T10:06:10.076Z","repository":{"id":137477638,"uuid":"204491926","full_name":"jacwright/svelte-navaid","owner":"jacwright","description":"A Svelte router powered by https://github.com/lukeed/navaid/","archived":false,"fork":false,"pushed_at":"2020-06-17T22:40:39.000Z","size":16,"stargazers_count":18,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-09T02:24:09.588Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jacwright.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-08-26T14:20:49.000Z","updated_at":"2024-11-18T05:13:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"cb6f11bb-ebab-4a15-836c-400406c1dcb9","html_url":"https://github.com/jacwright/svelte-navaid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacwright%2Fsvelte-navaid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacwright%2Fsvelte-navaid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacwright%2Fsvelte-navaid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacwright%2Fsvelte-navaid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacwright","download_url":"https://codeload.github.com/jacwright/svelte-navaid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247007444,"owners_count":20868213,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T01:01:33.608Z","updated_at":"2025-10-25T10:06:09.998Z","avatar_url":"https://github.com/jacwright.png","language":"HTML","readme":"# svelte-navaid\n\nNavaid-based routing components for Svelte. Does not work with Sapper. Yet. I don’t think. Contributions welcome.\n\n## Getting Started\n\n```bash\nnpm i --save svelte-navaid\n```\n\n```svelte\n\u003cscript\u003e\n  import Router from 'svelte-navaid/Router.svelte';\n  import Route from 'svelte-navaid/Route.svelte';\n  import Link from 'svelte-navaid/Link.svelte';\n  import SomeComponent from './SomeComponent.svelte';\n\u003c/script\u003e\n\n\u003cRouter\u003e\n  \u003ch1\u003eHello World!\u003c/h1\u003e\n\n  \u003cLink href=\"/\"\u003eHome\u003c/Link\u003e | \u003cLink href=\"foo/sub1\"\u003eFoo\u003c/Link\u003e | \u003cLink href=\"/bar?abc=def\"\u003eBar\u003c/Link\u003e\n\n  \u003cRoute path=\"/\"\u003e\n    \u003ch2\u003eHome\u003c/h2\u003e\n  \u003c/Route\u003e\n\n  \u003c!-- Supports navaid wildcards --\u003e\n  \u003cRoute path=\"/foo/*\"\u003e\n    \u003ch2\u003eFoo\u003c/h2\u003e\n\n    \u003c!-- Supports subroutes with relative URLs (prefixed with /foo/ here) --\u003e\n    \u003cRouter\u003e\n\n      \u003c!-- Links are relative to the subroute they appear in --\u003e\n      \u003cLink href=\"sub1\"\u003eSub 1\u003c/Link\u003e | \u003cLink href=\"/sub2\"\u003eSub 2\u003c/Link\u003e\n\n      \u003cRoute path=\"/sub1\"\u003e\n        \u003ch3\u003eSub Foo 1\u003c/h3\u003e\n      \u003c/Route\u003e\n\n      \u003cRoute path=\"/sub2\"\u003e\n        \u003ch3\u003eSub Foo 2\u003c/h3\u003e\n      \u003c/Route\u003e\n\n    \u003c/Router\u003e\n  \u003c/Route\u003e\n\n  \u003c!-- Supports slots or component prop, the props from params will be passed to it --\u003e\n  \u003cRoute path=\"/bar\" component={SomeComponent} myProperty={someValue}/\u003e\n\n  \u003c!-- Supports passing params --\u003e\n  \u003cRoute path=\"/things/:id\" let:params\u003e\n    The ID is: {params.id}\n  \u003c/Route\u003e\n\n  \u003c!-- Supports 404 pages --\u003e\n  \u003cRoute\u003e\n    \u003ch2\u003ePage Not Found\u003c/h2\u003e\n  \u003c/Route\u003e\n\u003c/Router\u003e\n```\n\nUse hash-based routing for single-page apps that are hosted on a server which doesn't support it.\n\n```svelte\n\u003cscript\u003e\n  import Router from 'svelte-navaid/Router.svelte';\n  import Route from 'svelte-navaid/Route.svelte';\n  import Link from 'svelte-navaid/Link.svelte';\n  import navaidHash from 'svelte-navaid/navaid-hash';\n\u003c/script\u003e\n\n\u003cRouter library={navaidHash}\u003e\n  \u003ch1\u003eHello World!\u003c/h1\u003e\n\n  \u003c!-- links will be converted to their hash equivalent (e.g. #/foo/sub1) --\u003e\n  \u003cLink href=\"/\"\u003eHome\u003c/Link\u003e | \u003cLink href=\"foo/sub1\"\u003eFoo\u003c/Link\u003e | \u003cLink href=\"/bar?abc=def\"\u003eBar\u003c/Link\u003e\n\n  \u003cRoute path=\"/\"\u003e\n    \u003ch2\u003eHome\u003c/h2\u003e\n  \u003c/Route\u003e\n\n  \u003cRoute path=\"/foo/*\"\u003e\n    \u003ch2\u003eFoo\u003c/h2\u003e\n\n    \u003c!-- Supports subroutes with relative URLs (prefixed with /foo/ here) --\u003e\n    \u003cRouter\u003e\n\n      \u003c!-- Links are relative to the subroute they appear in --\u003e\n      \u003cLink href=\"sub1\"\u003eSub 1\u003c/Link\u003e | \u003cLink href=\"/sub2\"\u003eSub 2\u003c/Link\u003e\n\n      \u003cRoute path=\"/sub1\"\u003e\n        \u003ch3\u003eSub Foo 1\u003c/h3\u003e\n      \u003c/Route\u003e\n\n      \u003cRoute path=\"/sub2\"\u003e\n        \u003ch3\u003eSub Foo 2\u003c/h3\u003e\n      \u003c/Route\u003e\n\n    \u003c/Router\u003e\n  \u003c/Route\u003e\n\n  \u003cRoute path=\"/bar\"\u003e\n    \u003ch2\u003ebar\u003c/h2\u003e\n  \u003c/Route\u003e\n\u003c/Router\u003e\n```\n\nNavigate to paths programmatically. The first 2 options are recommended because they will use the context of the router.\nThis allows using the path relative to the nearest router vs the whole application. Be sure to start the URL with `/` to\nget the intended result.\n\n```svelte\n\u003cscript\u003e\n  import Router from 'svelte-navaid/Router.svelte';\n  import Route from 'svelte-navaid/Route.svelte';\n\n  let navigate;\n\u003c/script\u003e\n\n\u003cRouter bind:navigate\u003e\n  \u003ch1\u003eHello World!\u003c/h1\u003e\n\n  \u003cRoute path=\"/\"\u003e\n    \u003cbutton on:click={() =\u003e navigate('/bar')}\u003eGo To Bar\u003c/button\u003e\n  \u003c/Route\u003e\n\n  \u003cRoute path=\"/bar\"\u003e\n    \u003cbutton on:click={() =\u003e navigate('/')}\u003eGo Home\u003c/button\u003e\n  \u003c/Route\u003e\n\u003c/Router\u003e\n```\n\n\n```svelte\n\u003cscript\u003e\n  import { getContext } from 'svelte';\n\n  const navigate = getContext('navigate');\n\u003c/script\u003e\n\n\u003cbutton on:click={() =\u003e navigate('/bar')}\u003eGo To Bar\u003c/button\u003e\n```\n\nWhen using the following method, you must use the full path, even if within nested routes (e.g. \"/blog/articles/23\"). It\ndoes not know the base URL. If using the hash library this method will also require you use the hash (e.g. \"#/blog/articles/23\").\nIf you write your components using one of the previous two methods, they will be more portable and maintainable.\n\n```svelte\n\u003cscript\u003e\n  import { navigate } from 'svelte-navaid';\n\u003c/script\u003e\n\n\u003cbutton on:click={() =\u003e navigate('/bar')}\u003eGo To Bar\u003c/button\u003e\n```\n\n## Testing\n\n```bash\nnpm run dev\n```\n\nThis will start a server where you can view a simple demo app which shows off the router and its features.\n","funding_links":[],"categories":["components and libraries"],"sub_categories":["routers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacwright%2Fsvelte-navaid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacwright%2Fsvelte-navaid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacwright%2Fsvelte-navaid/lists"}