A plugin header with icon, title, custom actions, and navigation tabs.
import { Header } from '@backstage/ui';
<Header 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. |
<Header
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.
<Header
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.
<Header
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-Headerbui-HeaderToolbarbui-HeaderToolbarWrapperbui-HeaderToolbarContentbui-HeaderToolbarControlsbui-HeaderToolbarIconbui-HeaderToolbarNamebui-HeaderTabsWrapperBreaking 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