Item Page Layout

A full-page shell that composes a header navigation bar, a ContentCard body, and arrow-key keyboard navigation between adjacent items.

ItemPageLayout assembles the structural chrome for a detail/show page. It wires together ItemHeaderBlocks (back button + breadcrumb + optional right-side content), a ContentCard that wraps children, and a BottomWiggleNotification slot. Left/right arrow keys navigate to the previous or next item via useRouter.

Installation

npx shadcn@latest add @adv/item-page-layout

Usage

import { ItemPageLayout } from '@/components/ui/ItemPageLayout';

<ItemPageLayout
  basePath="/work/acme/"
  prevItem={{ id: 'alpha', title: 'Alpha Project' }}
  nextItem={{ id: 'gamma', title: 'Gamma Project' }}
  defaultBackPath="/work"
  backButtonText="Work"
  breadcrumb={[{ label: 'Work' }, { label: 'Beta Project' }]}
  rightSideContent={<span>Published Jan 2025</span>}
>
  <article className="p-8">
    <h1>Beta Project</h1>
    <p>Case study content…</p>
  </article>
</ItemPageLayout>

Example

← Back buttonBreadcrumb / ItemRight content

children (ContentCard)

← prev itemkeyboard navigationnext item →

Note: The live preview above shows the layout anatomy. The full component requires a Next.js router context and a min-h-screen page — render it at the route level, not inside a nested component.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Required. Page body rendered inside `ContentCard`.
`basePath`	`string`	—	Required. URL prefix prepended to `prevItem.id` / `nextItem.id` when navigating.
`prevItem`	`{ id: string; title: string } \| null`	—	Required. Previous item descriptor; pass `null` when none exists.
`nextItem`	`{ id: string; title: string } \| null`	—	Required. Next item descriptor; pass `null` when none exists.
`defaultBackPath`	`string`	`undefined`	Path used by the back button when there is no navigation history.
`backButtonId`	`string`	`undefined`	HTML `id` forwarded to the `BackButton` element.
`backButtonText`	`string`	`undefined`	Label text for the back button.
`breadcrumb`	`BreadcrumbItem[]`	`undefined`	Array of `{ label, icon? }` items rendered as a breadcrumb trail.
`rightSideContent`	`ReactNode`	`undefined`	Arbitrary content rendered on the right side of the header bar (e.g. publish date).

Item Page Layout

Installation

Usage

Example

Props

On this page