Page Header - Kumo Svelte

Installation

PageHeader is a block - a CLI-installed component that you own and can customize. Unlike regular components, blocks are copied into your project so you have full control over the code.

1. Initialize Kumo config (first time only)

npx kumo-svelte init

2. Install the block

npx kumo-svelte add PageHeader

3. Import from your local path

<script lang="ts">  import { PageHeader } from './components/kumo/page-header/page-header';</script>

Usage

<script lang="ts">  import { Breadcrumbs } from 'kumo-svelte';  import { PageHeader } from './components/kumo/page-header/page-header';  let activeTab = $state('overview');</script>{#snippet breadcrumbs()}  <Breadcrumbs>    <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>    <Breadcrumbs.Separator />    <Breadcrumbs.Link href="#">Projects</Breadcrumbs.Link>    <Breadcrumbs.Separator />    <Breadcrumbs.Current>My Project</Breadcrumbs.Current>  </Breadcrumbs>{/snippet}<PageHeader  breadcrumbContent={breadcrumbs}  tabs={[    { label: 'Overview', value: 'overview' },    { label: 'Settings', value: 'settings' }  ]}  defaultTab="overview"  bind:activeTab  onValueChange={(value) => {    console.log(value);  }}/>

Examples

Basic

With Icons

With Tabs

With Actions

With Title

With Title and Description

Complete Example

Combining breadcrumbs, title, description, tabs, and actions.

API Reference

Prop	Type	Default	Description
spacing	`'compact' \| 'base' \| 'relaxed'`	`"base"`	Spacing preset between header rows.
breadcrumbContent *	`Snippet`	-	Breadcrumb composition rendered at the top of the header.
title	`string`	-	Optional page title.
description	`string`	-	Optional page description.
tabs	`TabsItem[]`	-	Tabs shown in the lower header row.
defaultTab	`string`	-	Initial selected tab value.
class	`string`	-	Additional classes merged onto the root element.
children	`Snippet`	-	Action content rendered on the right side of the tabs row.
onValueChange	`(value: string) => void`	-	Callback fired when the active tab changes.

TabsItem

Property	Type
label	string
value	string