Page Header
PageHeader 页面顶栏（search / title 两变体，装着搜索、通知、profile、actions），Breadcrumbs 面包屑。
PageHeader
2 个 Figma 预设 variant × 3 色 × 若干按钮开关。Figma 里的 Back / Bookmark / Favorite 三个分类是 IconButton 样张，不是 PageHeader 整体变体。
Import
import { PageHeader, Breadcrumbs } from "@forge-ui/react";Search & Widget Variant
对应 Figma 「Search & Widget」。常用于 app 全局顶栏：左搜索 + 中间功能 icon（calendar / notification / messages / language）+ 右 profile。
1<PageHeader2 variant="search"3 searchPlaceholder="Search anything..."4 notifications={3}5 messages={1}6 showProfile7 profile={{8 name: "Jane Doe",9 role: "Admin",10 avatar: "https://i.pravatar.cc/40?img=5",11 }}12/>Page Title Variant
对应 Figma 「Page Title」。页面级标题 + 返回 / 日期 / filter / favorite / 主次 action 等按钮按需开关。
Projects
1<PageHeader2 variant="title"3 title="Projects"4 showBackButton5 showDatePicker6 datePickerLabel="Mar 2026"7 primaryAction={{ label: "New Project", onClick: () => {} }}8/>API
| Attribute | Type | Default | Description |
|---|---|---|---|
variant | 'search' | 'title' | 'title' | 两种布局：search（全局 header 带搜索 + 通知 + profile）与 title（页面标题 + 返回 + actions）。 |
color | 'purple' | 'blue' | 'black' | 'purple' | 主色（影响通知徽标等）。 |
searchPlaceholder | string | — | search 变体：搜索框占位。 |
onSearch | (value: string) => void | — | 搜索提交回调。 |
notifications / messages | number | — | 通知 / 消息数量（> 0 时显示红色徽标）。 |
showProfile | boolean | true | search 变体：是否显示右上角 profile 槽。 |
profile | { name, role, avatar } | — | profile 数据对象。 |
title | string | — | title 变体：页面标题文案。 |
showBackButton | boolean | true | title 变体：是否显示左侧返回箭头。 |
showDatePicker | boolean | true | title 变体：是否显示日期 picker 按钮。 |
showFilters | boolean | true | title 变体：是否显示 filter 按钮。 |
primaryAction / secondaryAction | { label, onClick, icon? } | — | 右侧主 / 次按钮。 |
children | ReactNode | — | 自定义内容槽。 |