App Rail

Svelte Component

A side navigation rail component

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

Selected: 1

Getting Started

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>

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="https://github.com/">(icon)</AppRailTile>