Skip to Content
FrontendBundlesCRUDDetail / ShowHeader

Detail Header

DetailHeader renders the top-of-page header on entity detail/show pages. Displays the entity title, breadcrumb navigation, and optionally a status badge.

Import

import { DetailHeader } from "@phpcreation/frontend-crud-react-nextjs-bundle/components/DetailHeader";

Props

PropTypeDescription
titlestring | ((entity: Entity) => string)Page title or title factory
titleFieldstringField to use as the title (alternative to title)
statusFieldstringField to render as a status badge
breadcrumbsBreadcrumbItem[]Custom breadcrumb items
classNamestringAdditional CSS classes

Usage

import { DetailShowContext } from "...";
import { DetailHeader } from "...";
 
<DetailShowContext entityConfig={entityConfig} id={id}>
  <DetailHeader
    titleField="name"
    statusField="status"
    breadcrumbs={[
      { label: "Invoices", href: "/invoices" },
    ]}
  />
</DetailShowContext>
Last updated on
Tree PositionQuick Add