Breadcrumbs

Renderiza una ruta de navegación horizontal desde un arreglo de ítems. Todos los ítems excepto el último se muestran como botones clickeables; el último aparece como texto en negrita no interactivo. Soporta íconos opcionales en cada ítem.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | path | BreadcrumbItem[] | Sí | — | Arreglo ordenado de ítems del breadcrumb. | | onNavigate | (item: BreadcrumbItem, index: number) => void | Sí | — | Se ejecuta al hacer clic en un ítem navegable. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor <nav>. | | buttonStyle | React.CSSProperties | No | — | Estilos de cada botón clickeable. |

Forma de BreadcrumbItem

| Campo | Tipo | Requerido | Descripción | |-------|------|-----------|-------------| | name | string | Sí | Identificador único del ítem. | | label | string | Sí | Texto visible del ítem. | | icon | string \| null | No | Nombre del ícono antes del texto. | | color | string \| null | No | Color asociado al ítem. |

Uso

Básico

import Breadcrumbs from '@/components/Breadcrumbs';

const path = [
  { name: 'inicio', label: 'Inicio' },
  { name: 'productos', label: 'Productos' },
  { name: 'detalle', label: 'Detalle del Producto' },
];

export default function Example() {
  return (
    <Breadcrumbs
      path={path}
      onNavigate={(item, index) => console.log('Navegar a:', item.name)}
    />
  );
}

Con íconos

import Breadcrumbs from '@/components/Breadcrumbs';

const path = [
  { name: 'dashboard', label: 'Dashboard', icon: 'home' },
  { name: 'ventas', label: 'Ventas', icon: 'chart' },
  { name: 'reporte', label: 'Reporte Mensual', icon: 'document' },
];

export default function Example() {
  return (
    <Breadcrumbs
      path={path}
      onNavigate={(item) => console.log(item.name)}
    />
  );
}