Overview
Getting Started
Installation
About
Changelog
Core Concepts
Iconography
Layout
Responsive
Theming
Layout Components
Box
Alpha
Container
Alpha
Grid
Alpha
Flex
Alpha
Components
Avatar
Alpha
Button
Alpha
ButtonIcon
Alpha
ButtonLink
Alpha
Card
Alpha
Checkbox
Alpha
Collapsible
Alpha
Header
Alpha
HeaderPage
Alpha
Icon
Alpha
Link
Alpha
Menu
Alpha
RadioGroup
Alpha
SearchField
Alpha
Select
Alpha
Skeleton
Alpha
Switch
Alpha
Table
Alpha
Tabs
Alpha
TagGroup
Alpha
Text
Alpha
TextField
Alpha
Tooltip
Alpha
Version 0.7.0 - Alpha
Header
Component

Header

A header component for the plugin.

Your plugin

CampaignsIntegrations

Usage

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

<Header />

API reference

PropTypeDefaultResponsive
icon
ReactNode
-No
title
string
Your pluginNo
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

CampaignsIntegrations

<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

CampaignsIntegrations
HomeDashboardSettings

Page title

<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.

Changelog