Svelte Component

App Rail

A side navigation rail component

typescript 
import { AppRail, AppRailTile } from '@skeletonlabs/skeleton';
Source Page Source

Demo

Selected Tile: 0

Anchor Tiles

Use tag="a" to convert any tile to an anchor link, then append href, target, rel, and other attributes as needed.

Page State

The simplest way to update the active anchor link is to pass a derived store that takes its value from $page.url.pathname.

The store value will be compared to the href attribute of each tile if no value attribute is provided.

typescript 
import { page } from '$app/stores';
import { derived } from 'svelte/store';

const selected = derived(page, $page => $page.url.pathname);
html 
<AppRail {selected}>
	<AppRailTile label="Home" href="/">(icon)</AppRailTile>
	<AppRailTile label="About" href="/about">(icon)</AppRailTile>
	<AppRailTile label="Login" href="/login">(icon)</AppRailTile>
</AppRail>