build69
build69  /  Components  /  Page Structure  /  DetailHead

DetailHead

v1.0.16Updated 19 Oct 2026

Header for record detail pages: title + key meta fields + status + tabs + actions. Pairs with KVList for the body.

View source← Back to catalog

Preview

Live · 14 stories
DefaultOpen ↗
▸Why this is recommendeddetailheaderrecordmeta+1

The default, out-of-the-box DetailHead.

Recommended for+14
  • ✓Top of every record detail page
  • ✓Customer / invoice / employee profiles
Tags+6
detailheaderrecordmetadefault
Features+4
  • Title + subtitle + status badge
  • Key-value meta row
  • Action button group
  • Tabs slot below header
  • Breadcrumb
  • Client-side routing: pass `linkComponent` (next/link, React Router Link) and every row that has an href renders through the host app link component instead of a plain anchor, which would reload the whole document (fb_bf7dc63a), breadcrumb crumbs included; DetailHeadCrumb gains an event-carrying onClick so a host can preventDefault and route itself
  • Avatar / icon slot
  • i18n: labels prop overrides every built-in UI string (breadcrumb/edit-title/overflow aria, statusTone fallback pills) — see DetailHeadLabels / DEFAULT_DETAIL_HEAD_LABELS
Not recommended for−2
  • ✕List pages (use PageHead)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "DetailHead" })

Usage

import { DetailHead } from '@/components/patterns/detail-head';

<DetailHead title="INV-2025-0042" status={<Badge>PAID</Badge>} meta={metaItems} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
title

Record title

stringyes
status

Status badge

ReactNode—
meta

Key-value meta row

MetaItem[]—
actions

Action button group

ReactNode—
labels

Override any built-in UI string — breadcrumb/edit-title/overflow aria and the statusTone fallback pills (i18n). Merged over DEFAULT_DETAIL_HEAD_LABELS.

Partial<DetailHeadLabels>—
linkComponent

The host app link component for every breadcrumb that has an href (next/link, React Router Link). Defaults to a plain anchor, which in a routed app reloads the whole document. Crumbs carry data-slot="detail-head-crumb-link" and keep aria-current="page" on the last one. DetailHeadCrumb.onClick receives the click EVENT. MCP feedback fb_bf7dc63a.

DetailHeadLinkComponent—

Related

Platform docsAll componentsSource files