Generated Navigation
Navigation can be generated automatically by traversing the node tree or using the next/prev methods. A node is a page, a fallback, or a folder (layout).
Navbar/sitemap
<script>
import { layout, url } from "@roxi/routify";
</script>
{#each $layout.children as node}
<a href={$url(node.path)} > {node.title} </a>
<!-- uncomment for recursive links <svelte:self {node} /> -->
{/each} <script>
import { layout, url } from "@roxi/routify";
</script>
{#each $layout.children as node}
<a href={$url(node.path)} > {node.title} </a>
<!-- uncomment for recursive links <svelte:self {node} /> -->
{/each}Interactive example
Click burger menu to navigate files.
Next and previous links
Remember to check if next and prev routes exist.
<script>
import { page, url } from "@roxi/routify";
</script>
<a href={$url($page.next)}>{$page.next.title}</a>
<a href={$url($page.prev)}>{$page.prev.title}</a>
<script>
import { page, url } from "@roxi/routify";
</script>
<a href={$url($page.next)}>{$page.next.title}</a>
<a href={$url($page.prev)}>{$page.prev.title}</a>next and prev, have a look at routify.dev's implementation.Writing good documentation that is up-to-date is difficult. If you notice a mistake, help us out.