Svelte Component

App Rail

A side navigation rail component

typescript 
import { AppRail, AppRailTile, AppRailAnchor } from '@skeletonlabs/skeleton';
Source Page Source

Demo
Tile Value: 0

Tiles

We offer two types of tiles below. Consider mixing and matching these as needed.

AppRailTile

These tiles are intended to maintain state using an embedded checkbox input. Use these within forms or to query submenus, similar to the Skeleton documentation sidebar.

AppRailAnchor

These tiles operate as anchor tags, supporting href, target, rel, and more. Use these when you wish to link to a new page when this tile is clicked.

Anchor

Page State

Using the SvelteKit page store, you can dynamically highlight the active link based on it's path.

typescript 
import { page } from '$app/stores';
html 
<AppRail>
	<AppRailAnchor href="/" selected={$page.url.pathname === '/'}>(icon)</AppRailAnchor>
	<AppRailAnchor href="/about" selected={$page.url.pathname === '/about'}>(icon)</AppRailAnchor>
</AppRail>

Horizontal Orientation

The App Rail is intended for vertical orientations only. For mobile interfaces, considering using a navigation tab component.