Breadcrumb Header Shell
Full-page shell for deep detail views with a breadcrumb trail, page title, meta row, and action buttons above two content panels.
Full-page shell for deep detail views with a breadcrumb trail, page title, meta row, and action buttons above two content panels.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Breadcrumb Header Shell is a full-page layout for deep detail views. A slim top bar holds the Acme lockup and the signed-in user. Below it a breadcrumb trail leads from Projects through Acme Website Redesign to the current page, Milestone 3, In progress. The page header pairs the title with a meta row showing Due Jun 27, 2026 and 6 of 12 tasks complete, then Export, More, and Edit milestone actions. Two content panels fill the main area in a 2-to-1 grid column split.
The breadcrumbs array drives the trail and marks the last crumb with no href so it renders as plain text. This header is the feature of the block; the panels are intentional slots for the real content below.
Reach for this block on any deep record or document page where hierarchy context matters, a project milestone, a support ticket, or a settings sub-page, wired to your router breadcrumbs and page metadata.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the project milestone detail page. Other breadcrumb header pages:
Tip: keep the last breadcrumb label identical to the h1 so screen readers do not hear the same name twice through two different paths.