Navigation

There are a million ways to handle navigation. Hopefully, this page can save you some time when creating navigation for your next project.

The url helper

The url helper creates links from relative, absolute or, named paths.

The advantage of using url is that it allows for your code to be modular. If you rename your editor/ folder to admin/, all the internal links inside that folder will still work.

<a href={$url('./introduction')}>
  A link to the introduction section on your left
</a>

The isActive helper

The isActive helper tells you whether a path is active or not. It resolves the provided path with the $url helper.

<style>
  .active {font-weight: bold}
</style>

<div class:active={$isActive('./blog')}
  <a href={$url('./blog')}>
    Blog
  </a>
</div>

You can read more about the $isActive helper here

Handling multiple links

Links can be handled in an array of different ways. This might be the easiest way.

<script>
  import {isActive, url} from '@roxi/routify'

  const links =
  [
    ['./index', 'Home'], //add index if you don't want siblings to be considered children
    ['./blog', 'Blog'],
    ['./about', 'About'],
    ['./contact', 'Contact']
  ]
</script>

<style>
  .active {font-weight: bold}
</style>

<ul>
  {#each links as [path, name]}
    <!-- Svelte magic. If isActive is true, the "active" class is applied. -->
    <li class:active={$isActive(path)}>
      <a href={$url(path)}>
        {name}
      </a>
    </li>
  {/each}
</ul>

Automatic navigation generation

It is also possible to generate navigation from your file structure. In fact, all navigation on this site is generated. Even hash links, external links, and the previous/next buttons you see below.

To create links for files in a folder, create a _layout.svelte in the folder and import the layout helper.

<!-- _layout.svelte -->
<script>
  import { isActive, url, layout } from "@roxi/routify";
</script>

<ul>
  {#each $layout.children as { path, title }}
    <li class:active={$isActive(path)}>
        <a href={$url(path)}>{title}</a>
    </li>
  {/each}
</ul>

Links are ordered by their file's index, which you can set with metadata. <!-- routify:options index=3 --> . To omit a file from navigation, set index to false.

External links and hash links can be added with the children metadata.

<!-- routify:options children=[
  {title: "Github", icon:"github", path: "//github.com/sveltech/routify"},
  {title: "Discord", icon:"discord", path: "//discord.gg/ntKJD5B"},
  {title: "Twitter", icon:"twitter", path: "//twitter.com/routifyjs"}
] -->

<a> default Navigation

If you want to use anchor's default navigation behaviour you can do so by adding the target attribute.

Routify will ignore all anchors with target attribute.

<a href="/non-routify-page" target="_self">Legacy Navigation</a>