A plugin header with icon, title, custom actions, and navigation tabs.
import { PluginHeader } from '@backstage/ui';
<PluginHeader title="My plugin" />| Prop | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | - | Icon displayed before the title. |
| title | string | - | Main heading text for the header. |
| titleLink | string | - | URL the title links to when clicked. |
| customActions | ReactNode | - | Custom elements rendered in the toolbar area. |
| tabs | - | Navigation tabs displayed below the toolbar. | |
| onTabSelectionChange | (key: Key) => void | - | Handler called when the selected tab changes. |
| className | string | - | Additional CSS class name for custom styling. |
<PluginHeader
title="My plugin"
titleLink="/"
customActions={
<>
<ButtonIcon variant="tertiary" icon={<RiCloudy2Line />} />
<ButtonIcon variant="tertiary" icon={<RiEmotionHappyLine />} />
<ButtonIcon variant="tertiary" icon={<RiHeartLine />} />
</>
}
/>Tabs use React Router and highlight automatically based on the current route.
<PluginHeader
title="My plugin"
titleLink="/"
tabs={[
{ id: 'overview', label: 'Overview', href: '/overview' },
{ id: 'checks', label: 'Checks', href: '/checks' },
{ id: 'tracks', label: 'Tracks', href: '/tracks' },
{ id: 'campaigns', label: 'Campaigns', href: '/campaigns' },
{ id: 'integrations', label: 'Integrations', href: '/integrations' },
]}
/>Combine with HeaderPage for multi-level navigation.
<PluginHeader
title="My plugin"
titleLink="/"
tabs={[
{ id: 'overview', label: 'Overview', href: '/overview' },
{ id: 'checks', label: 'Checks', href: '/checks' },
]}
/>
<HeaderPage
title="Page title"
tabs={[
{ id: 'banana', label: 'Banana', href: '/banana' },
{ id: 'apple', label: 'Apple', href: '/apple' },
]}
customActions={<Button>Custom action</Button>}
/>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-PluginHeaderbui-PluginHeaderToolbarbui-PluginHeaderToolbarWrapperbui-PluginHeaderToolbarContentbui-PluginHeaderToolbarControlsbui-PluginHeaderToolbarIconbui-PluginHeaderToolbarNamebui-PluginHeaderTabsWrapperBreaking 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