Navigation - Skeleton

Rail

Recommended for medium to large screens.
Ideal for horizontal screen layouts.
Should be fixed to the left or right of the viewport.
Supports 3-7 tiles.

(Content)

<script lang="ts">
	import { Nav } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import IconMenu from 'lucide-svelte/icons/menu';
	import IconFolder from 'lucide-svelte/icons/folder';
	import IconImage from 'lucide-svelte/icons/image';
	import IconMusic from 'lucide-svelte/icons/music';
	import IconVideo from 'lucide-svelte/icons/video';
	import IconSettings from 'lucide-svelte/icons/settings';

	let hrefExample = '#';
</script>

<div class="card border-surface-100-900 grid h-[640px] w-full grid-cols-[auto_1fr] border-[1px]">
	<!-- Component -->
	<Nav.Rail>
		{#snippet header()}
			<Nav.Tile href="/" title="Menu"><IconMenu /></Nav.Tile>
		{/snippet}
		{#snippet tiles()}
			<Nav.Tile id="0" label="Files" href={hrefExample}>
				<IconFolder />
			</Nav.Tile>
			<Nav.Tile id="1" label="Images" href={hrefExample}>
				<IconImage />
			</Nav.Tile>
			<Nav.Tile id="2" label="Music" href={hrefExample}>
				<IconMusic />
			</Nav.Tile>
			<Nav.Tile id="3" label="Videos" href={hrefExample}>
				<IconVideo />
			</Nav.Tile>
		{/snippet}
		{#snippet footer()}
			<Nav.Tile labelExpanded="Settings" href="/settings" title="settings"><IconSettings /></Nav.Tile>
		{/snippet}
	</Nav.Rail>
	<!-- Content -->
	<div class="flex items-center justify-center">
		<p class="opacity-20">(Content)</p>
	</div>
</div>

Expanded Mode

Apply the expanded property to enable expanded mode. Each tile will resize and used the expanded label.

(Content)

<script lang="ts">
	import { Nav } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import IconMenu from 'lucide-svelte/icons/menu';
	import IconFolder from 'lucide-svelte/icons/folder';
	import IconImage from 'lucide-svelte/icons/image';
	import IconMusic from 'lucide-svelte/icons/music';
	import IconVideo from 'lucide-svelte/icons/video';
	import IconGames from 'lucide-svelte/icons/gamepad';
	import IconSettings from 'lucide-svelte/icons/settings';

	let hrefExample = '#';
</script>

<div class="card border-surface-100-900 grid h-[760px] w-full grid-cols-[auto_1fr] border-[1px]">
	<!-- Component -->
	<Nav.Rail expanded>
		{#snippet header()}
			<Nav.Tile href="/" labelExpanded="Menu"><IconMenu /></Nav.Tile>
		{/snippet}
		{#snippet tiles()}
			<Nav.Tile id="0" labelExpanded="Browse Files" href={hrefExample}>
				<IconFolder />
			</Nav.Tile>
			<Nav.Tile id="1" labelExpanded="Browse Images" href={hrefExample}>
				<IconImage />
			</Nav.Tile>
			<Nav.Tile id="2" labelExpanded="Browse Music" href={hrefExample}>
				<IconMusic />
			</Nav.Tile>
			<Nav.Tile id="2" labelExpanded="Browse Videos" href={hrefExample}>
				<IconVideo />
			</Nav.Tile>
			<Nav.Tile id="2" labelExpanded="Browse Games" href={hrefExample}>
				<IconGames />
			</Nav.Tile>
		{/snippet}
		{#snippet footer()}
			<Nav.Tile labelExpanded="Settings" href="/settings" title="Settings"><IconSettings /></Nav.Tile>
		{/snippet}
	</Nav.Rail>
	<!-- Content -->
	<div class="flex items-center justify-center">
		<p class="opacity-20">(Content)</p>
	</div>
</div>

Bar

Recommended for small screens.
Ideal for vertical screen layouts.
Should be fixed to the bottom of the viewport.
Supports 3-5 tiles.
Consider progressive enhancement with the Virtual Keyboard API.

(Content)

<script lang="ts">
	import { Nav } from '@skeletonlabs/skeleton-svelte';
	import IconFolder from 'lucide-svelte/icons/folder';
	import IconImage from 'lucide-svelte/icons/image';
	import IconMusic from 'lucide-svelte/icons/music';
	import IconVideo from 'lucide-svelte/icons/video';

	// You may optionally bind a selected state value
	// Pass the ID item you wish to be selected by default.
	let value = $state('0');
</script>

<div class="card border-surface-100-900 grid h-[512px] w-[320px] grid-rows-[1fr_auto] border-[1px]">
	<!-- Content -->
	<div class="flex items-center justify-center">
		<p class="opacity-20">(Content)</p>
	</div>
	<!-- Component -->
	<Nav.Bar bind:value onchange={console.log}>
		<Nav.Tile id="0" label="Files">
			<IconFolder />
		</Nav.Tile>
		<Nav.Tile id="1" label="Images">
			<IconImage />
		</Nav.Tile>
		<Nav.Tile id="2" label="Music">
			<IconMusic />
		</Nav.Tile>
		<Nav.Tile id="3" label="Videos">
			<IconVideo />
		</Nav.Tile>
	</Nav.Bar>
</div>

Tiles

Tiles are universal between Rails and Bars. They default to buttons, but will convert to anchors when an href is provided. When implementing value for selection, each item will reflect the active state automatically. If you wish to set this state manually, use the selected property.

Anchor

<script lang="ts">
	import { Nav } from '@skeletonlabs/skeleton-svelte';
	import IconBox from 'lucide-svelte/icons/box';

	let hrefExample = '#';
</script>

<div class="card preset-filled-surface-100-900 grid grid-cols-3 gap-5 p-5">
	<!-- By default tiles are <button> elements -->
	<Nav.Tile id="0" label="Button">
		<IconBox />
	</Nav.Tile>
	<!-- Add selected to button tiles to enable the active state -->
	<Nav.Tile id="0" label="Button" selected>
		<IconBox />
	</Nav.Tile>
	<!-- When adding an href, they are converted to anchors -->
	<Nav.Tile id="0" label="Anchor" href={hrefExample}>
		<IconBox />
	</Nav.Tile>
</div>