HeaderPage

Usage

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

<HeaderPage />

API reference

Examples

With Breadcrumbs

You can add breadcrumbs to the header page to help users navigate to the previous page. The breadcrumbs prop is an array of objects with a label and href property. By default we truncate the breadcrumb label to 240px.

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

With Tabs

You can add tabs to the header page to help users navigate to the different sections of the page. The tabs prop is an array of objects with a label and href property.

<HeaderPage
  title="Page Title"
  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' },
  ]}
/>

With Custom Actions

You can add custom actions to the header page to help users navigate to the different sections of the page. The customActions prop is a React node.

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

With Menu Items

You can add menu items to the header page to help users navigate to the different sections of the page. The menuItems prop is an array of objects with a label, value and onClick property.

<HeaderPage
  title="Page Title"
  menuItems={[
    { label: 'Settings', value: 'settings', onClick: () => {} },
    { label: 'Invite new members', value: 'invite-new-members', onClick: () => {} },
  ]}
/>

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-HeaderPage
• bui-HeaderPageContent
• bui-HeaderPageBreadcrumbs
• bui-HeaderPageTabsWrapper
• bui-HeaderPageControls

Changelog