Breadcrumb
unreleasedstable
A navigation trail for docs, app routes, and dense workspace headers.
import { Breadcrumb } from "@/components/ui/breadcrumb";
export function Component() {
return (
<Breadcrumb
items={[
{ href: "/", label: "Home" },
{ label: "Current page", current: true },
]}
/>
);
}Breadcrumb
Nav landmark that can render route item data or accept composed breadcrumb children.
BreadcrumbList / BreadcrumbItem
Ordered-list anatomy for composed breadcrumb trails.
BreadcrumbLink / BreadcrumbPage
Anchor and current-page parts with native link and aria-current semantics.
BreadcrumbSeparator / BreadcrumbEllipsis
Decorative separator and accessible ellipsis button for collapsed trails.