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>
For recursive 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.