Page Header
kumo-svelte

Page Header

A composite component that combines breadcrumbs and tabs for page navigation.

<script lang="ts">
  import { Breadcrumbs, Button } from 'kumo-svelte';
  import { PageHeader } from '../../../blocks/page-header';
  import { Code, Globe, House } from 'phosphor-svelte';

  let activeTab = $state('overview');
</script>

{#snippet breadcrumbs()}
  <Breadcrumbs>
    <Breadcrumbs.Link icon={House} href="#">Workers & Pages</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current>cloudflare-dev-platform</Breadcrumbs.Current>
  </Breadcrumbs>
{/snippet}

<PageHeader
  class="w-full"
  breadcrumbContent={breadcrumbs}
  tabs={[
    { label: 'Overview', value: 'overview' },
    { label: 'Metrics', value: 'metrics' },
    { label: 'Deployments', value: 'deployments' },
    { label: 'Bindings', value: 'bindings' },
    { label: 'Observability', value: 'observability' },
    { label: 'Settings', value: 'settings' }
  ]}
  defaultTab="overview"
  bind:activeTab
>
  <Button icon={Code} class="h-8">Edit code</Button>
  <Button icon={Globe} variant="primary" class="h-8">Visit</Button>
</PageHeader>

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

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

{#snippet breadcrumbs()}
  <Breadcrumbs>
    <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>
  </Breadcrumbs>
{/snippet}

<PageHeader breadcrumbContent={breadcrumbs} />

With Icons

<script lang="ts">
  import { Breadcrumbs } from 'kumo-svelte';
  import { PageHeader } from '../../../blocks/page-header';
  import { Gear, House } from 'phosphor-svelte';
</script>

{#snippet breadcrumbs()}
  <Breadcrumbs>
    <Breadcrumbs.Link icon={House} href="#">Home</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current icon={Gear}>Settings</Breadcrumbs.Current>
  </Breadcrumbs>
{/snippet}

<PageHeader breadcrumbContent={breadcrumbs} />

With Tabs

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

{#snippet breadcrumbs()}
  <Breadcrumbs>
    <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current>Settings</Breadcrumbs.Current>
  </Breadcrumbs>
{/snippet}

<PageHeader
  breadcrumbContent={breadcrumbs}
  tabs={[
    { label: 'General', value: 'general' },
    { label: 'Security', value: 'security' },
    { label: 'Notifications', value: 'notifications' }
  ]}
  defaultTab="general"
/>

With Actions

<script lang="ts">
  import { Breadcrumbs, Button } from 'kumo-svelte';
  import { PageHeader } from '../../../blocks/page-header';
</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"
>
  <Button variant="primary" size="base">Deploy</Button>
</PageHeader>

With Title

Page title

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

{#snippet breadcrumbs()}
  <Breadcrumbs>
    <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Link href="#">Products</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current>Page title</Breadcrumbs.Current>
  </Breadcrumbs>
{/snippet}

<PageHeader breadcrumbContent={breadcrumbs} title="Page title" />

With Title and Description

Page title

Action-led, value-oriented description of what this page does. Optional second sentence with use cases or prerequisites.

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

{#snippet breadcrumbs()}
  <Breadcrumbs>
    <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Link href="#">Products</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current>Page title</Breadcrumbs.Current>
  </Breadcrumbs>
{/snippet}

<PageHeader
  breadcrumbContent={breadcrumbs}
  title="Page title"
  description="Action-led, value-oriented description of what this page does. Optional second sentence with use cases or prerequisites."
/>

Complete Example

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

Page title

Action-led, value-oriented description of what this page does.

<script lang="ts">
  import { Breadcrumbs, Button } from 'kumo-svelte';
  import { PageHeader } from '../../../blocks/page-header';
  import { Plus } from 'phosphor-svelte';
</script>

{#snippet breadcrumbs()}
  <Breadcrumbs>
    <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Link href="#">Products</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current>Page title</Breadcrumbs.Current>
  </Breadcrumbs>
{/snippet}

<PageHeader
  breadcrumbContent={breadcrumbs}
  title="Page title"
  description="Action-led, value-oriented description of what this page does."
  tabs={[
    { label: 'Overview', value: 'overview' },
    { label: 'Analytics', value: 'analytics' },
    { label: 'Settings', value: 'settings' }
  ]}
  defaultTab="overview"
>
  <Button variant="outline" size="sm">Export</Button>
  <Button variant="primary" size="sm" icon={Plus}>New Item</Button>
</PageHeader>

API Reference

PropTypeDefaultDescription
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

PropertyType
labelstring
valuestring