Layout UI

Breadcrumb

A server-compatible breadcrumb trail showing the user's location within a hierarchy. BreadcrumbSeparator accepts a custom icon child; BreadcrumbEllipsis collapses long paths.

Preview

Installation

bash
npx shadcn@latest add @layout/breadcrumb

Usage

tsx
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";

Examples

With ellipsis (collapsed)

Custom separator

Guidelines for AI agents

Place at the top of content areas to help users navigate back. Use BreadcrumbPage (not BreadcrumbLink) for the final segment. Use BreadcrumbEllipsis with a DropdownMenu to reveal hidden intermediate crumbs on mobile.

Never

  • Nevermark the current page with BreadcrumbLink; always use BreadcrumbPage
  • Neveruse breadcrumbs for flat or single-level navigation
  • Neverhardcode colours; text colours resolve through text-foreground and text-muted-foreground
  • Neveradd interactive elements inside BreadcrumbPage; it is aria-disabled

Tokens consumed

--layout-fg--layout-muted-fg--layout-duration-base