Page Header

A page introduction with breadcrumbs, supporting text, and optional actions.

Page Header standardizes the opening of an application or settings page: a breadcrumb trail, page title, short context, and optional actions aligned with the heading.

Variants and behaviour

Use it as a compact title area with only a heading, or add breadcrumbs, description, and one or more actions when a route needs more orientation or controls.

Customization

Actions are a snippet so they can use any Fractalsvelte controls. Breadcrumb items accept href values and work with the router or plain links.

Examples

Installation

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

Install

pnpm add fractalsvelte

Import

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

Usage

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

<PageHeader title="Settings" description="Manage your workspace." />

Props

Prop	Type	Default	Description
`breadcrumbs`	`BreadcrumbItem[]`	`[]`	Links leading to the current page.
`title`	`string`	`-`	Page title.
`description`	`string`	`-`	Optional supporting copy.
`actions`	`Snippet`	`-`	Optional action controls.

Source

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

PageHeader.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';
	interface Crumb { label: string; href?: string; }
	interface Props { title: string; description?: string; breadcrumbs?: Crumb[]; actions?: Snippet; }
	let { title, description, breadcrumbs = [], actions }: Props = $props();
</script>
<header class="page-header box gap16">
	{#if breadcrumbs.length}<nav class="row gap4 text-sm" aria-label="Breadcrumb">{#each breadcrumbs as crumb, index (crumb.label)}{#if index > 0}<span aria-hidden="true">/</span>{/if}{#if crumb.href}<a href={crumb.href}>{crumb.label}</a>{:else}<span aria-current="page">{crumb.label}</span>{/if}{/each}</nav>{/if}
	<div class="row xbetween ycenter gap16 wrap"><div class="box gap8"><h1>{title}</h1>{#if description}<p>{description}</p>{/if}</div>{#if actions}<div>{@render actions()}</div>{/if}</div>
</header>
<style lang="sass">
	.page-header
		border-bottom: 1px solid var(--border-primary)
		padding-bottom: 16px
		transition: padding 200ms ease
		h1, p
			margin: 0
		p
			color: var(--text-secondary)
		a
			color: var(--text-secondary)
	@media (prefers-reduced-motion: reduce)
		.page-header
			transition: none
</style>