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

To set an active state for an anchor link, compare the tile href URL to the active page URL using $page.url.pathname. Then set a background color or other visual indicator via the Svelte class syntax.

typescript 
import { page } from '$app/stores';
html 
<AppRailTile tag="a" href={tileUrl} class="{tileUrl === $page.url.pathname ? '!bg-primary-500' : ''}">
    (icon)
</AppRailTile>