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#