Header

A secondary header with title, breadcrumbs, tabs, and actions.

Page Title

Usage#

import { Header } from '@backstage/ui';

<Header title="Page Title" />

API reference#

Prop	Type	Default	Description
title	string	-	Page heading displayed in the header.
customActions	ReactNode	-	Custom elements rendered in the actions area.
tabs		-	Navigation items displayed below the title.
activeTabId	string	-	ID of the currently active tab. Can be a flat tab ID or a child tab ID within a group.
breadcrumbs		-	Breadcrumb trail displayed above the title.
className	string	-	Additional CSS class name for custom styling.

Examples#

Breadcrumbs#

Labels are truncated at 240px.

Home Long Breadcrumb Name

Page Title

<Header
  title="Page Title"
  breadcrumbs={[
    { label: 'Home', href: '/' },
    { label: 'Long Breadcrumb Name', href: '/long-breadcrumb' },
  ]}
/>

Tabs#

Tabs use React Router and highlight based on the current route.

Page Title

<Header
  title="Page Title"
  tabs={[
    { id: 'overview', label: 'Overview', href: '/overview' },
    { id: 'checks', label: 'Checks', href: '/checks' },
    { id: 'tracks', label: 'Tracks', href: '/tracks' },
  ]}
/>

Custom actions#

Page Title

<Header
  title="Page Title"
  customActions={<Button>Custom action</Button>}
/>

Use customActions to add a dropdown menu.

Page Title

<Header
  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>
  }
/>

Theming#

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-Header
bui-HeaderContent
bui-HeaderBreadcrumbs
bui-HeaderTabsWrapper
bui-HeaderControls

Changelog#

Version 0.13.0#

Breaking Changes

Header Breaking Renamed internal CSS classes to match the Header component name.

Migration: If you are targeting these classes directly in your styles, update the following:
- bui-HeaderPage → bui-Header
- bui-HeaderPageContent → bui-HeaderContent
- bui-HeaderPageBreadcrumbs → bui-HeaderBreadcrumbs
- bui-HeaderPageTabsWrapper → bui-HeaderTabsWrapper
- bui-HeaderPageControls → bui-HeaderControls #33354

Changes

Header Page Migrated all components from useStyles to useDefinition hook. Exported OwnProps types for each component, enabling better type composition for consumers. #33050
Header Fixed incorrect bottom spacing caused by Container using padding-bottom for its default bottom spacing. Changed to margin-bottom and prevented it from applying when Container is used as the Header root element. #33354

Version 0.9.0#

Breaking Changes

Header Breaking 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