Capítulo 37 de 108

Breadcrumb

Core Idea

Displays the path to the current resource using a hierarchy of links. Use for navigation trails in nested pages (e.g. Home > Components > Breadcrumb).

Key Concepts

  • render prop: BreadcrumbLink uses render={<a href="#" />} (or render={<Link href="/" />} for Next.js) to swap in a custom link component from any routing library, instead of a dedicated as/asChild prop.
  • BreadcrumbPage: marks the current (non-clickable) page, distinct from BreadcrumbLink.
  • BreadcrumbSeparator: renders a default separator icon; accepts custom children (e.g. <DotIcon />) to override it.
  • BreadcrumbEllipsis: collapsed-state indicator for long breadcrumb trails, typically paired with a DropdownMenu to reveal hidden items.
  • dir: Breadcrumb accepts dir for RTL; propagate to nested DropdownMenuContent's align too (align={dir === "rtl" ? "end" : "start"}).

Code Examples

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
  • O que demonstra: composição básica, terminando em BreadcrumbPage (não BreadcrumbLink) para a página atual.
<BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger render={<button className="flex items-center gap-1" />}>
      Components
      <ChevronDownIcon data-icon="inline-end" className="size-3.5" />
    </DropdownMenuTrigger>
    <DropdownMenuContent align="start">
      <DropdownMenuGroup>
        <DropdownMenuItem>Documentation</DropdownMenuItem>
        <DropdownMenuItem>Themes</DropdownMenuItem>
        <DropdownMenuItem>GitHub</DropdownMenuItem>
      </DropdownMenuGroup>
    </DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>
  • O que demonstra: dropdown embutido num BreadcrumbItem para navegação com múltiplas opções no mesmo nível.
<BreadcrumbLink render={<Link href="/components" />}>
  Components
</BreadcrumbLink>
  • O que demonstra: integração com next/link (ou qualquer router) via render, evitando full page reload.

Composition

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    └── BreadcrumbItem
        └── BreadcrumbPage

Reference Tables

ComponenteProps relevantes
BreadcrumbclassName
BreadcrumbListclassName
BreadcrumbItemclassName
BreadcrumbLinkclassName, render (custom link component)
BreadcrumbPageclassName (não clicável, representa página atual)
BreadcrumbSeparatorchildren (separador custom), className
BreadcrumbEllipsisclassName (indicador de colapso)

Anti-patterns

  • Usar BreadcrumbLink na página atual: a última entrada deve ser BreadcrumbPage, não BreadcrumbLink, para não sugerir que a página atual é clicável.
  • Ignorar render e usar href cru com router client-side: em Next.js/routers SPA, usar render={<Link .../>} evita reload completo; href puro (<a>) é só para navegação simples.

Key Takeaways

  1. Roteamento customizado (Next.js Link, React Router, etc.) entra via prop render em BreadcrumbLink, não via prop dedicada.
  2. BreadcrumbEllipsis + DropdownMenu é o padrão para colapsar trilhas longas.
  3. Separador é customizável passando children a BreadcrumbSeparator (ex: <DotIcon /> em vez do ícone padrão).
  4. RTL exige propagar dir para Breadcrumb e ajustar align do DropdownMenuContent manualmente.

Connects To

  • DropdownMenu: usado dentro de BreadcrumbItem para expandir opções ou itens colapsados.
  • NavigationMenu: outro componente de navegação, mas para menus de nível superior, não trilha hierárquica.
  • Sidebar: frequentemente usado junto de Breadcrumb no header de layouts com sidebar.
AnteriorAccordionPróximoNavigation Menu