Components / Breadcrumb

Breadcrumb

A page title on a route-navigated app (MMA) when the screen is one level inside a list screen, such as one connection inside Connections. The parent is a link; the current page is the last item. In the product app, stacked canvas sheets are the breadcrumb, so this is not used there.

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@layers/ui/breadcrumb'

Rendered stock

House rules

• Stock shadcn structure. BreadcrumbLink takes a render prop for the router link; never asChild.
• One house deviation: the stock 6px and 10px gaps sit on the 8px grid instead (8px between items, 4px inside one).
• The last item is BreadcrumbPage, never a link to the page you are on.
• It replaces a Back button. A screen with a breadcrumb has no separate Back action.