A secondary header with title, breadcrumbs, tabs, and actions.
import { HeaderPage } from '@backstage/ui';
<HeaderPage title="Page Title" />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | Page heading displayed in the header. |
| customActions | ReactNode | - | Custom elements rendered in the actions area. |
| tabs | - | Navigation tabs displayed below the title. | |
| breadcrumbs | - | Breadcrumb trail displayed above the title. | |
| className | string | - | Additional CSS class name for custom styling. |
Labels are truncated at 240px.
<HeaderPage
title="Page Title"
breadcrumbs={[
{ label: 'Home', href: '/' },
{ label: 'Long Breadcrumb Name', href: '/long-breadcrumb' },
]}
/>Tabs use React Router and highlight based on the current route.
<HeaderPage
title="Page Title"
tabs={[
{ id: 'overview', label: 'Overview', href: '/overview' },
{ id: 'checks', label: 'Checks', href: '/checks' },
{ id: 'tracks', label: 'Tracks', href: '/tracks' },
]}
/><HeaderPage
title="Page Title"
customActions={<Button>Custom action</Button>}
/>Use customActions to add a dropdown menu.
<HeaderPage
title="Page Title"
customActions={
<MenuTrigger>
<ButtonIcon variant="tertiary" icon={<RiMore2Line />} />
<Menu placement="bottom end">
<MenuItem href="/settings">Settings</MenuItem>
<MenuItem onAction={() => {}}>Logout</MenuItem>
</Menu>
</MenuTrigger>
}
/>Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.
bui-HeaderPagebui-HeaderPageContentbui-HeaderPageBreadcrumbsbui-HeaderPageTabsWrapperbui-HeaderPageControlsBreaking Changed className prop behavior to augment default styles instead of being ignored or overriding them.
If you were passing custom className values to any of these components that relied on the previous behavior, you may need to adjust your styles to account for the default classes now being applied alongside your custom classes. #31496