Components

ContentHeader

Industrial design systems put the same block at the top of every workspace screen: where you are (breadcrumbs), what you're looking at (title + subtitle), and what you can do (actions). ContentHeader is that block.

Anatomy

Every slot is optional except title. The breadcrumb trail renders above; actions align to the end of the title row and wrap below it on narrow screens.

Open fullscreen

9:41

project.tsx

import { ContentHeader, Breadcrumbs, BreadcrumbItem } from "appshell-react";
import { Plus } from "lucide-react";

<ContentHeader
  breadcrumbs={
    <Breadcrumbs>
      <BreadcrumbItem label="Terra" href="/" />
      <BreadcrumbItem label="Projects" href="/projects" />
      <BreadcrumbItem label="Atlas launch" current />
    </Breadcrumbs>
  }
  title="Atlas launch"
  subtitle="14 open tasks · due Friday"
  actions={
    <button className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground">
      <Plus className="size-4" /> New task
    </button>
  }
/>

Breadcrumbs

Breadcrumbs is standalone: an aria-label="Breadcrumb" nav with automatic separators. Items with an href render through the LinkProvider component, so trails navigate client-side in routed apps; current marks the page you’re on with aria-current.

The Terra demo linked above shows the full pattern: a docked Sidebar, a ContentHeader with a breadcrumb trail, and the task list below — the standard workspace frame.

API

Prop	Type	Default	Description
title*	ReactNode	—	Screen title.
subtitle	ReactNode	—	Supporting line under the title.
breadcrumbs	ReactNode	—	Typically a <Breadcrumbs> — rendered above the title.
actions	ReactNode	—	Right-aligned controls — buttons, menus.
className	string	—	Extra classes.

Prop	Type	Default	Description
className	string	—	Extra classes.
children*	ReactNode	—	BreadcrumbItems.
aria-label	string	—	Accessible name of the trail. Defaults to the "Breadcrumb" label.

Prop	Type	Default	Description
label*	string	—	Crumb text.
href	string	—	Renders as a link, through the LinkProvider component (plain <a> by default).
current	boolean	false	Marks the current page: aria-current, no link styling.
onClick	() => void	—	Click handler (renders a button when no href).
className	string	—	Extra classes.