Navigation

There's a million ways to handle navigation. Hopefully this page can save you some time when creating the 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>
<a href={$url('../introduction')}>
  A link to the introduction section on your left
</a>
A link to the introduction section on your left

Unlike traditional links, $url is relative to the layout or page it is located in and not the current URL in the address bar.

You can read more about the $url helper here

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>
<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 '@sveltech/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>
<script>
  import {isActive, url} from '@sveltech/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 "@sveltech/routify"; </script> <ul> {#each $layout.children as { path, title }} <li class:active={$isActive(path)}> <a href={$url(path)}>{title}</a> </li> {/each} </ul>
<!-- _layout.svelte -->
<script>
  import { isActive, url, layout } from "@sveltech/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"} ] -->
<!-- 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>
<a href="/non-routify-page" target="_self">Legacy Navigation</a>

Writing good documentation that is up-to-date is difficult. If you notice a mistake, help us out.