Svelte Component

App Rail

A side navigation rail component

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


Selected Tile: 1

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.

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