Breadcrumb — SLAB

Examples

2-level · 3-level · 5-level · collapsed

2 levels

3 levels

5 levels (no collapse)

Collapsed — maxItems=3

In context — page header

Breadcrumb above a page title with action button

SLAB Studio

Active · updated 2 hours ago

Props

Prop	Type	Default	Description
items	{label, href?, onClick?}[]	[]	Trail items. Last item is always rendered as current page (bold, no link).
maxItems	number	0	Collapse middle items when count exceeds this. 0 = no limit.
separator	ReactNode	chevron SVG	Custom separator between items.

Usage

import { Breadcrumb } from "components/ui/Breadcrumb";

// Basic
<Breadcrumb items={[
  { label: "Home",      href: "/" },
  { label: "Campaigns", href: "/campaigns" },
  { label: "SLAB Studio" }, // last = current page
]} />

// Collapsed past 3 items
<Breadcrumb
  items={breadcrumbs}
  maxItems={3}
/>

// With onClick instead of href
<Breadcrumb items={[
  { label: "Home",      onClick: () => navigate("/") },
  { label: "Campaigns", onClick: () => navigate("/campaigns") },
  { label: "Detail" },
]} />