<PageHeader
className="w-full"
breadcrumbs={[
{
icon: <HouseIcon />,
label: "Workers & Pages",
to: "/",
},
{
label: "cloudflare-dev-platform",
to: "/about",
}
]}
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
Copy and paste the following code into your project.
import { PageHeader } from "~/blocks/page-header";Usage
import { PageHeader } from "~/blocks/page-header";
export default function Example() {
return (
<PageHeader
breadcrumbs={[
{ label: "Home", to: "/" },
{ label: "Projects", to: "/projects" },
{ label: "My Project" }
]}
tabs={[
{ label: "Overview", href: "/projects/my-project" },
{ label: "Settings", href: "/projects/my-project/settings" }
]}
/>
);
}Examples
Basic
<PageHeader
breadcrumbs={[
{ label: "Home", to: "/" },
{ label: "Dashboard" }
]}
/>With Tabs
<PageHeader
breadcrumbs={[
{ label: "Home", to: "/" },
{ label: "Settings" }
]}
tabs={[
{ label: "General", href: "/settings" },
{ label: "Security", href: "/settings/security" },
{ label: "Notifications", href: "/settings/notifications" }
]}
/>With Icons
<PageHeader
breadcrumbs={[
{ label: "Home", to: "/", icon: <HouseIcon size={16} /> },
{ label: "Settings", icon: <GearIcon size={16} /> }
]}
tabs={[
{ label: "General", href: "/settings" },
{ label: "Advanced", href: "/settings/advanced" }
]}
/>With Actions
<PageHeader
breadcrumbs={[
{ label: "Home", to: "/" },
{ label: "Projects", to: "/projects" },
{ label: "My Project" }
]}
tabs={[
{ label: "Overview", href: "/projects/my-project" },
{ label: "Settings", href: "/projects/my-project/settings" }
]}
>
<Button variant="primary" size="base">
Deploy
</Button>
</PageHeader>API Reference
| Prop | Type | Default |
|---|---|---|
| breadcrumbs | BreadcrumbItem[] | required |
| tabs | { label: string; href: string }[] | undefined |
| children | React.ReactNode | undefined |