Breadcrumb

Cuándo usarlo#

Cuando el sitio tiene tres o más niveles y la persona puede llegar a una página profunda desde afuera (un buscador, un link). Es navegación secundaria: acompaña al menú, no lo reemplaza.

• Refleja la jerarquía del sitio, no el historial de navegación.
• Arranca en Inicio y termina en la página actual, que no es link.
• Va arriba del título de la página, una sola vez.
• No lo uses en sitios planos ni dentro de flujos (checkout, inscripción).

Rutas largas y tamaños#

Con más de cuatro niveles, colapsá los del medio: siempre quedan visibles el primero y los dos últimos.

import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem } from "@/registry/ds/breadcrumb";

export default function BreadcrumbCollapsed() {
  return (
    <div className="flex flex-col items-start gap-5">
      <Breadcrumb size="sm" label="Ruta, chica">
        <BreadcrumbItem href="#" separator={false}>Inicio</BreadcrumbItem>
        <BreadcrumbEllipsis />
        <BreadcrumbItem href="#">Ingeniería</BreadcrumbItem>
        <BreadcrumbItem current>Plan de estudios</BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb size="lg" label="Ruta, grande">
        <BreadcrumbItem href="#" separator={false}>Inicio</BreadcrumbItem>
        <BreadcrumbItem href="#">Carreras</BreadcrumbItem>
        <BreadcrumbItem current>Ingeniería</BreadcrumbItem>
      </Breadcrumb>
    </div>
  );
}

Contenido#

• Cada nivel usa el título real de la página a la que lleva.
• Si un título es muy largo, truncalo con elipsis; nunca lo reescribas.

Medidas#

Tokens#

En Figma#

Instalación#

npx shadcn@latest add https://polen.cdc.cool/r/breadcrumb.json

Playground#

Configurá el componente y copiá el snippet: se genera del mismo estado que renderiza el preview.

<Breadcrumb>
  <BreadcrumbItem href="#" separator={false}>Inicio</BreadcrumbItem>
  <BreadcrumbItem href="#">Carreras</BreadcrumbItem>
  <BreadcrumbItem href="#">Ingeniería</BreadcrumbItem>
  <BreadcrumbItem current>Plan de estudios</BreadcrumbItem>
</Breadcrumb>

Props#

Con Next.js, pasá tu Link por composición: el item acepta todos los atributos de <a>.

• Es un <nav> con nombre propio y una lista ordenada: el lector de pantalla anuncia "Ruta de navegación, lista de 4 elementos".
• La página actual lleva aria-current="page".
• Los separadores son decorativos (aria-hidden).
• Si hay otro <nav> en la página, cada uno necesita su aria-label distinto.
• En mobile, preferí mostrar solo el nivel anterior ("← Carreras").