Kolibri Navigation

The Basics

Basic Navigation

Kolibri allows to navigate between pages of a site.

This basic site starts with two pages: Home Page and Unstyled.

Please try the links in the text above, the buttons below, or in the top or side navigation.

Home Page Unstyled

Features

Kolibri supports the user of this site and its developers with these basic features:

  • use links in the page content or in the navigation menus
  • use the browsers back and forward buttons and gestures
  • use the browser history
  • jump directly to any page via shared URL, QR code, or bookmark
  • see where we currently are and where we can go
  • enjoy best practices for link visualization and privacy
  • rely on error handling.

There are additional advanced features:

  • animated page transitions that are specific per page and can overlap
  • style isolation to avoid conflicting page styles and contamination
  • typesafe navigation
  • pages with interactive content maintain their state throughout navigation.

Typesafe Navigation

Broken links are annoying and testing against broken links is tedious and error-prone.

Kolibri uses its ubiquitous, plain-vanilla JS type system to make each broken link a type error, such that developers fix it even before testing! The user can rely on all internal links being available.

Example of a broken link that appears in the code as a type error! Try to click it to see the fallback error handling.

screenshot of the type error
The navigation type error as seen in the IDE.

References

Find the sources of this site on github .

The Kolibri navigation support is based on a bachelor project by our FHNW students Altermatt and Schnidrig.

You might also want to visit the initial contribution with many more features.