<PageHeader
  className="w-full"
  breadcrumbs={
    <Breadcrumbs>
      <Breadcrumbs.Link icon={<HouseIcon size={16} />} href="#">
        Workers & Pages
      </Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Current>cloudflare-dev-platform</Breadcrumbs.Current>
    </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"
  onValueChange={(v) => console.log(v)}
>
  <Button icon={<CodeIcon />} className="h-8">Edit code</Button>
  <Button icon={<GlobeIcon />} variant="primary" className="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 @cloudflare/kumo init

2. Install the block

npx @cloudflare/kumo add PageHeader

3. Import from your local path

// The path depends on your kumo.json blocksDir setting
// Default: src/components/kumo/
import { PageHeader } from "./components/kumo/page-header/page-header";

Usage

import { PageHeader } from "./components/kumo/page-header/page-header";
import { Breadcrumbs } from "@cloudflare/kumo";

export default function Example() {
  return (
    <PageHeader
      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>
      }
      tabs={[
        { label: "Overview", value: "overview" },
        { label: "Settings", value: "settings" }
      ]}
      defaultTab="overview"
      onValueChange={(value) => {
        console.log(value);
      }}
    />
  );
}

Examples

Basic

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

With Icons

<PageHeader
  breadcrumbs={
    <Breadcrumbs>
      <Breadcrumbs.Link icon={<HouseIcon size={16} />} href="#">
        Home
      </Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Current icon={<GearIcon size={16} />}>
        Settings
      </Breadcrumbs.Current>
    </Breadcrumbs>
  }
/>

With Tabs

<PageHeader
  breadcrumbs={
    <Breadcrumbs>
      <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Current>Settings</Breadcrumbs.Current>
    </Breadcrumbs>
  }
  tabs={[
    { label: "General", value: "general" },
    { label: "Security", value: "security" },
    { label: "Notifications", value: "notifications" },
  ]}
  defaultTab="general"
/>

With Actions

<PageHeader
  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>
  }
  tabs={[
    { label: "Overview", value: "overview" },
    { label: "Settings", value: "settings" }
  ]}
  defaultTab="overview"
>
  <Button variant="primary" size="base">
    Deploy
  </Button>
</PageHeader>

With Title

Page title

<PageHeader
  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>
  }
  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.

<PageHeader
  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>
  }
  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.

<PageHeader
  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>
  }
  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={<PlusIcon />}>New Item</Button>
</PageHeader>

API Reference

Prop	Type	Default	Description
spacing	`"compact" \| "base" \| "relaxed"`	`"base"`	-
breadcrumbs	`ReactNode`	-	-
title	`string`	-	-
description	`string`	-	-
tabs	`TabsItem[]`	-	-
defaultTab	`string`	-	-
className	`string`	-	-
children	`ReactNode`	-	-

TabsItem

Property	Type
label	string
value	string

Kumo

Kumo

Page Header

Page title

Page title

Page title

TabsItem