Component

Breadcrumb

Navigation trail. Links intermediate steps; renders the last item as the bold current page.

Default — two levels

live editor — edit to update preview
<Breadcrumb items={[{ label: "Admin", href: "#" }, { label: "Articles" }]} className="" />

Three levels

live editor — edit to update preview
<Breadcrumb
  items={[
    { label: "Home", href: "#" },
    { label: "Blog", href: "#" },
    { label: "Getting started" },
  ]}
  className=""
/>

Props

PropTypeDefaultDescription
items*BreadcrumbItem[]—Array of { label, href? }. Last item has no href and is rendered bold.
classNamestring"mb-8"Wrapper class. Pass className="" to remove the default bottom margin.