🚨 Disclaimer: Routify 3 is currently in Release Candidate stage.

Please be aware that while the documentation is comprehensive, it may contain inaccuracies or errors. The codebase is also subject to changes that could affect functionality. We appreciate your understanding and welcome any feedback or contributions.

api

Components

Experimental! Components may change or be moved to a separate package.

Components are prefabricated parts that you can use or copy into your projects.

Carousel

@roxi/routify/components/Carousel.svelte

The Carousel component displays inline pages and automatically synchronizes swipes and page changes.

<script>
  import Carousel from '@roxi/routify/components/Carousel.svelte';
</script>

<Carousel>
  <slot/>
</Carousel>

Features:

Supports touchscreen.
Swiping to a page automatically sets it as the active page.
Changing a page automatically scrolls the carousel to the new page.

Nav

@roxi/routify/components/Nav.svelte

The Nav component provides a basic unstyled navigation. Feel free to style it as you wish.

<script>
  import Nav from '@roxi/routify/components/Nav.svelte';
</script>

<nav>
  <Nav />
</nav>

Features:

Displays navigation links for the current node's children.
Automatically sets the active class for the current page.
Supports custom titles using meta.title.

NavNested

@roxi/routify/components/NavNested.svelte

The NavNested component provides a basic unstyled nested navigation or sitemap. Feel free to style it as you wish.

<script>
  import NavNested from '@roxi/routify/components/NavNested.svelte';
</script>

<nav>
  <NavNested />
</nav>

Features:

Displays nested navigation links for the current node's children.
Automatically sets the active class for the current page.
Supports custom titles using meta.title.
Recursively renders child nodes up to a specified depth.

ProgressBar

@roxi/routify/components/ProgressBar.svelte

The ProgressBar component displays a loading indicator when a route change is pending.

<script>
  import ProgressBar from '@roxi/routify/components/ProgressBar.svelte';
</script>

<ProgressBar />

Features:

Displays a progress bar when a route change is pending.