Library · Navigation

Nav / Breadcrumb + Page Title Band

Interior-page header band — breadcrumb trail (Breadcrumbs primitive) above an H1 page title, with an optional subtitle. The final crumb renders as the current page. Tone via the shared contract.

Figma: Nav / Breadcrumb + Page Title Band ↗

Live preview — edit theme bottom-right

---
import NavPageTitle from "../components/figma/NavPageTitle.astro";
---
<NavPageTitle
  title="Riverside Residences"
  subtitle="A collection of 42 architecturally-designed apartments overlooking the river."
  tone="base-200"
  crumbs={[
    { label: "Home", href: "/" },
    { label: "Projects", href: "/projects" },
    { label: "Riverside Residences" },
  ]}
/>

Props

Name	Type	Required	Description
`title`	`string;`	Yes	Page title (H1)
`crumbs`	`Crumb[];`	Yes	Breadcrumb trail; the last item renders as the current page (no link)
`subtitle`	`string;`	—	Optional supporting line under the title
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral";`	—	Background tone — the Figma colour-variant axis

Example with all props

<NavPageTitle
  title="Riverside Residences"
  subtitle="A collection of 42 architecturally-designed apartments."
  tone="base-200"
  crumbs={[
    { label: "Home", href: "/" },
    { label: "Projects", href: "/projects" },
    { label: "Riverside Residences" },
  ]}
/>