Breadcrumb

Usage

import { Breadcrumb, breadcrumbAnatomy, BreadcrumbCurrent, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from "@desk/ui/components/breadcrumb";

Best practices

• Terminate the trail with BreadcrumbCurrent (it sets aria-current="page"), never a final BreadcrumbLink.

• Render router links via <BreadcrumbLink asChild> wrapping a framework <Link> — the bare default is an <a>.

• Collapse overflow with BreadcrumbEllipsis hosting a menu of the hidden crumbs, rather than dropping items silently.

Props

Anatomy