Header

A header component for the plugin.

Your plugin

Overview Checks Tracks Campaigns Integrations

Usage#

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

<Header />

API reference#

Prop	Type	Default	Responsive
icon	ReactNode	-	No
title	string	Your plugin	No
titleLink	string	/	No
customActions	ReactNode	-	No
menuItems		-	No
tabs		-	No
onTabSelectionChange	(key: string) => void	-	No
children	ReactNode	-	No
className	string	-	No
style	CSSProperties	-	No

Examples#

Simple header#

A simple example of how to use the Header component.

<Header
  title="My plugin"
  titleLink="/"
  tabs={[
    { id: 'overview', label: 'Overview' },
    { id: 'checks', label: 'Checks' },
    { id: 'tracks', label: 'Tracks' },
    { id: 'campaigns', label: 'Campaigns' },
    { id: 'integrations', label: 'Integrations' },
  ]}
  menuItems={[
    { label: 'Settings', value: 'settings' },
    { label: 'Invite new members', value: 'invite-new-members' },
  ]}
  customActions={
    <>
      <ButtonIcon variant="tertiary" icon={<RiCloudy2Line />} />
      <ButtonIcon variant="tertiary" icon={<RiEmotionHappyLine />} />
      <ButtonIcon variant="tertiary" icon={<RiHeartLine />} />
    </>
  }
/>

Header with tabs#

A simple example of how to use the Header component with tabs. All links are using React Router under the hood and will be active when you are on the corresponding page.

Your plugin

Overview Checks Tracks Campaigns Integrations


<Header
  title="My plugin"
  titleLink="/"
  tabs={[
    { id: 'overview', label: 'Overview' },
    { id: 'checks', label: 'Checks' },
    { id: 'tracks', label: 'Tracks' },
    { id: 'campaigns', label: 'Campaigns' },
    { id: 'integrations', label: 'Integrations' },
  ]}
  menuItems={[
    { label: 'Settings', value: 'settings' },
    { label: 'Invite new members', value: 'invite-new-members' },
  ]}
  customActions={
    <>
      <ButtonIcon variant="tertiary" icon={<RiCloudy2Line />} />
      <ButtonIcon variant="tertiary" icon={<RiEmotionHappyLine />} />
      <ButtonIcon variant="tertiary" icon={<RiHeartLine />} />
    </>
  }
  tabs={[
    { id: 'overview', label: 'Overview' },
    { id: 'checks', label: 'Checks' },
    { id: 'tracks', label: 'Tracks' },
    { id: 'campaigns', label: 'Campaigns' },
    { id: 'integrations', label: 'Integrations' },
  ]}
/>

Header with breadcrumbs#

Breacrumbs should appear when you scroll down (and not directly visible as it is in the demo below).

<Header
  title="My plugin"
  titleLink="/"
  breadcrumbs={[
    { label: 'Home', href: '/' },
    { label: 'Dashboard', href: '/dashboard' },
    { label: 'Settings', href: '/settings' },
  ]}
  tabs={[
    { id: 'overview', label: 'Overview' },
    { id: 'checks', label: 'Checks' },
    { id: 'tracks', label: 'Tracks' },
    { id: 'campaigns', label: 'Campaigns' },
    { id: 'integrations', label: 'Integrations' },
  ]}
/>

Header with HeaderPage#

You can use the Header component inside the HeaderPage component to compose your multi-level navigation.

Your plugin

Overview Checks Tracks Campaigns Integrations

Home Dashboard Settings

Page title

Banana Apple Orange

<Header
  title="My plugin"
  titleLink="/"
  breadcrumbs={...}
  tabs={...}
/>
<HeaderPage
  title="Page title"
  menuItems={...}
  tabs={...}
  customActions={<Button>Custom action</Button>}
/>

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-HeaderToolbar
bui-HeaderToolbarWrapper
bui-HeaderToolbarContent
bui-HeaderToolbarControls
bui-HeaderToolbarIcon
bui-HeaderToolbarName
bui-HeaderTabsWrapper