The PageHeader arranges elements that apply context and provide navigation for the current page.
The elements within PageHeader are rearranged and displayed accordingly depending on the viewport size and context of the page.
<PageHeader role="banner" aria-label="Title">
<PageHeader.TitleArea>
<PageHeader.Title>Title</PageHeader.Title>
</PageHeader.TitleArea>
</PageHeader>
<PageHeader role="banner" aria-label="Add-pageheader-docs">
<PageHeader.TitleArea>
<PageHeader.Title>add-pageheader-docs</PageHeader.Title>
</PageHeader.TitleArea>
<PageHeader.Description>
<Text sx={{fontSize: 1, color: 'fg.muted'}}>
<Link href="https://github.com/broccolinisoup" sx={{fontWeight: 'bold'}}>
broccolinisoup
</Link>{' '}
created this branch 5 days ago · 14 commits · updated today
</Text>
</PageHeader.Description>
</PageHeader>
<PageHeader role="banner" aria-label="Title">
<PageHeader.TitleArea>
<PageHeader.Title>Title</PageHeader.Title>
</PageHeader.TitleArea>
<PageHeader.Actions>
<IconButton aria-label="Workflows" icon={WorkflowIcon} />
<IconButton aria-label="Insights" icon={GraphIcon} />
<Button variant="primary" trailingVisual={TriangleDownIcon}>
Add Item
</Button>
<IconButton aria-label="Settings" icon={GearIcon} />
</PageHeader.Actions>
</PageHeader>
<PageHeader role="banner" aria-label="Pull request title">
<PageHeader.TitleArea>
<PageHeader.Title>Pull request title</PageHeader.Title>
</PageHeader.TitleArea>
<PageHeader.Navigation>
<UnderlineNav aria-label="Pull Request">
<UnderlineNav.Item icon={CommentDiscussionIcon} counter="12" aria-current="page">
Conversation
</UnderlineNav.Item>
<UnderlineNav.Item counter={3} icon={GitCommitIcon}>
Commits
</UnderlineNav.Item>
<UnderlineNav.Item counter={7} icon={ChecklistIcon}>
Checks
</UnderlineNav.Item>
<UnderlineNav.Item counter={4} icon={FileDiffIcon}>
Files Changes
</UnderlineNav.Item>
</UnderlineNav>
</PageHeader.Navigation>
</PageHeader>
Leading visual guidelines
Trailing visual guidelines
<PageHeader role="banner" aria-label="Title">
<PageHeader.TitleArea>
<PageHeader.LeadingVisual>
<GitPullRequestIcon />
</PageHeader.LeadingVisual>
<PageHeader.Title>Title</PageHeader.Title>
<PageHeader.TrailingVisual>
<Label>Beta</Label>
</PageHeader.TrailingVisual>
</PageHeader.TitleArea>
</PageHeader>
Leading action guidelines
Trailing action guidelines
<PageHeader role="banner" aria-label="Title">
<PageHeader.TitleArea>
<PageHeader.Title>Title</PageHeader.Title>
</PageHeader.TitleArea>
<PageHeader.LeadingAction>
<IconButton aria-label="Expand" icon={SidebarExpandIcon} variant="invisible" />
</PageHeader.LeadingAction>
<PageHeader.TrailingAction>
<IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
</PageHeader.TrailingAction>
</PageHeader>
The previous examples are a small subset of the full capabilities of the PageHeader component. For more in-depth examples that demonstrate responsive behavior and show realistc use-cases for GitHub, see the PageHeader Storybook stories.
Loading data for drafts_page_header...