Breadcrumbs provide clear, enterprise navigation hierarchy for Aggarly Platform. Use them in student profiles, therapy plans, billing flows, exports, and admin settings. They support overflow collapsing, truncation, icons, and premium header bar composition.
Default pattern: links + current page. Current renders as non-interactive with aria-current.
import { Breadcrumbs } from "@/design-system/components/Breadcrumbs";
export function Example() {
return (
<Breadcrumbs
items={[
{ label: "Home", href: "/" },
{ label: "Students", href: "/students" },
{ label: "Avery Johnson", current: true }
]}
/>
);
}
Premium, compact pattern: icon + label, pill styling, and tone-driven focus ring.
import { Breadcrumbs } from "@/design-system/components/Breadcrumbs";
function IconHome() { /* ... */ }
function IconFolder() { /* ... */ }
function IconStudent() { /* ... */ }
export function Example() {
return (
<Breadcrumbs
variant="pill"
tone="primary"
items={[
{ label: "Home", href: "/", icon: <IconHome /> },
{ label: "Students", href: "/students", icon: <IconFolder /> },
{ label: "Avery Johnson", current: true, icon: <IconStudent /> }
]}
/>
);
}
Use sm in dense toolbars, md for most pages, and lg for primary workflows.
import { Breadcrumbs } from "@/design-system/components/Breadcrumbs";
export function Example() {
const items = [
{ label: "Home", href: "/" },
{ label: "Students", href: "/students" },
{ label: "Student profile", current: true }
];
return (
<div className="breadcrumbs-row">
<Breadcrumbs size="sm" items={items} />
<Breadcrumbs size="md" items={items} />
<Breadcrumbs size="lg" items={items} />
</div>
);
}
Swap the default chevron for a different icon or text separator.
import { Breadcrumbs } from "@/design-system/components/Breadcrumbs";
function IconChevronSlash() { /* ... */ }
export function Example() {
return (
<Breadcrumbs
separator={<IconChevronSlash />}
items={[
{ label: "Home", href: "/" },
{ label: "Billing", href: "/billing" },
{ label: "Authorizations", current: true }
]}
/>
);
}
When paths become deep, collapse intermediate crumbs into an overflow menu (closes on outside click, Escape, scroll, and resize).
import { Breadcrumbs } from "@/design-system/components/Breadcrumbs";
export function Example() {
return (
<Breadcrumbs
maxItems={4}
collapseMode="middle"
items={[
{ label: "Home", href: "/" },
{ label: "Districts", href: "/districts" },
{ label: "North Region", href: "/districts/north" },
{ label: "School A", href: "/districts/north/school-a" },
{ label: "Students", href: "/districts/north/school-a/students" },
{ label: "Avery Johnson", current: true }
]}
/>
);
}
Enterprise-safe: keep headers clean while preserving full titles via title attribute.
import { Breadcrumbs } from "@/design-system/components/Breadcrumbs";
export function Example() {
return (
<Breadcrumbs
truncate
truncateWidth="md"
maxItems={5}
items={[
{ label: "Home", href: "/" },
{ label: "Students", href: "/students" },
{ label: "IEP / Clinical Documentation", href: "/students/docs", title: "IEP / Clinical Documentation" },
{ label: "Quarterly Summary Export Pipeline", href: "/students/docs/exports", title: "Quarterly Summary Export Pipeline" },
{ label: "Avery Johnson — 2025 Review & Approvals", current: true, title: "Avery Johnson — 2025 Review & Approvals" }
]}
/>
);
}
Common enterprise header pattern: breadcrumbs on the left, actions on the right.
import { Button } from "@/design-system/components/Button";
import { BreadcrumbBar, Breadcrumbs } from "@/design-system/components/Breadcrumbs";
export function Example() {
return (
<BreadcrumbBar
actions={
<>
<Button variant="ghost" size="sm">Export</Button>
<Button variant="primary" size="sm">New note</Button>
</>
}
>
<Breadcrumbs
items={[
{ label: "Home", href: "/" },
{ label: "Students", href: "/students" },
{ label: "Avery Johnson", current: true }
]}
/>
</BreadcrumbBar>
);
}