Svelte Component

App Rail

A side navigation rail component

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


Tile Value: 0


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


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.


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.

Page State

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

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

Horizontal Orientation

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