App Rail

Svelte Component

A side navigation rail component

@skeletonlabs/skeleton
View Source
Doc Source

Examples
Selected: 1

Usage

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

ts 
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">(lead)</svelte:fragment>
    <!-- (AppRailTiles Here) -->
    <svelte:fragment slot="trail">(trail)</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>