Navigation Sidebar

A vertical navigation block with optional brand and footer content.

Navigation Sidebar gives an application a consistent vertical navigation region with optional brand content, primary links, and a separate footer area for secondary actions.

Variants and behaviour

It is driven from simple primary and footer item arrays, and an optional snippet can add richer account or product content between them.

Customization

Connect each href to your router and use the optional content snippet for product-specific controls. Its surface and type colours inherit the shared tokens.

Examples

Installation

Install Fractalsvelte, then import the block from the dedicated blocks entry point.

Install

pnpm add fractalsvelte

Import

<script lang="ts">
	import { NavigationSidebar } from 'fractalsvelte/blocks';
</script>

Usage

<script lang="ts">
	import { NavigationSidebar } from 'fractalsvelte/blocks';
</script>

<NavigationSidebar items={[{ label: 'Overview', href: '/' }]} />

Props

Prop	Type	Default	Description
`brand`	`string`	`'Navigation'`	Accessible name and visible brand label.
`items`	`NavigationItem[]`	`-`	Primary navigation links.
`footerItems`	`NavigationItem[]`	`[]`	Secondary links at the bottom.
`children`	`Snippet`	`-`	Optional content between primary and footer links.

Source

Block source is published with the package and can be inspected here.

NavigationSidebar.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';
	interface Item { label: string; href: string; }
	interface Props { brand?: string; items: Item[]; footerItems?: Item[]; children?: Snippet; }
	let { brand = 'Navigation', items, footerItems = [], children }: Props = $props();
</script>
<nav class="navigation-sidebar" aria-label={brand}>
	<strong>{brand}</strong>
	<div class="box gap4">{#each items as item (item.href)}<a href={item.href}>{item.label}</a>{/each}</div>
	{#if children}<div>{@render children()}</div>{/if}
	{#if footerItems.length}<div class="box gap4">{#each footerItems as item (item.href)}<a href={item.href}>{item.label}</a>{/each}</div>{/if}
</nav>
<style lang="sass">
	.navigation-sidebar
		background: var(--color00)
		border: 1px solid var(--border-primary)
		border-radius: 6px
		display: flex
		flex-direction: column
		gap: 16px
		padding: 16px
		transition: width 200ms ease, padding 200ms ease
		a
			border-radius: 3px
			color: var(--text-primary)
			padding: 8px
			text-decoration: none
			&:hover
				background: var(--color10)
	@media (prefers-reduced-motion: reduce)
		.navigation-sidebar
			transition: none
</style>