App Rail

Svelte Component

A side navigation rail component

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

Selected Tile: 1

Getting Started

Create a Svelte writable store to house the selected tile value.

typescript 
import { writable, type Writable } from 'svelte/store';

const storeValue: Writable<number> = writable(1);

Implement your App Rail component and append the selected prop and store.

html 
<AppRail selected={storeValue}>
	<svelte:fragment slot="lead">
		<!-- AppRailTiles -->
	</svelte:fragment>
	<!-- AppRailTiles -->
	<svelte:fragment slot="trail">
		<!-- AppRailTiles -->
	</svelte:fragment>
</AppRail>

Adding Tiles

Create one or more rail tile components within your app rail's available slots.

html 
<AppRailTile label="Tile" title="Tile" value={1}>(icon)</AppRailTile>

Anchor Tiles

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

html 
<AppRailTile tag="a" href="/my/page/route">(icon)</AppRailTile>

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:bg-primary-500={tileUrl === $page.url.pathname}>
	(icon)
</AppRailTile>