Breadcrumb

Breadcrumb

El componente Breadcrumb es una representación visual de una lista de enlaces que proporcionan una navegación jerárquica en una aplicación web. Cada enlace en la lista se muestra con una etiqueta "a" que permite redirigir al usuario a la URL especificada.

Ejemplo

Importacion

Para importar el componente Breadcrumb, se puede hacer desde fenextjs o fenextjs-component

import { Breadcrumb, BreadcrumbProps } from "fenextjs/cjs/component/Breadcrumb";

o

import { Breadcrumb, BreadcrumbProps } from "fenextjs-component/cjs/Breadcrumb";

Parametros

ParametroTipoRequeridoDefaultDescripcion
linksBreadcrumbLinkProps[]siLista de links para el componente
classNamestringno""Clase personalizada del componente
classNameItemstringno""Clase personalizada de los items
classNameLinkstringno""Clase personalizada de los links

Parametros de los links (BreadcrumbLinkProps)

ParametroTipoRequeridoDefaultDescripcion
hrefstringsiUrl del link
childrenReactNodesiContenido del link
onClickfunctionnoFuncion que se ejecuta en el evento onClick del link

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

  • Uso básico del componente Breadcrumb
const breadcrumbLinks = [
  { href: "/", children: "Home" },
  { href: "/products", children: "Products" },
  { href: "/products/category", children: "Category" },
];
<Breadcrumb links={breadcrumbLinks} />;
  • Breadcrumb con clase de estilo personalizada
const breadcrumbLinks = [
  { href: "/", children: "Home" },
  { href: "/products", children: "Products" },
  { href: "/products/category", children: "Category" },
];
<Breadcrumb
  links={breadcrumbLinks}
  className="custom-breadcrumb"
  classNameItem="custom-breadcrumb-item"
  classNameLink="custom-breadcrumb-link"
/>;
  • Breadcrumb con evento de click personalizado
const breadcrumbLinks = [
  { href: "/", children: "Home" },
  { href: "/products", children: "Products" },
  { href: "/products/category", children: "Category" },
];
const handleLinkClick = () => {
  console.log("Breadcrumb link clicked!");
};
<Breadcrumb
  links={[
    { href: "/", children: "Home" },
    {
      href: "/products",
      children: "Products",
      onClick: handleLinkClick,
    },
    { href: "/products/category", children: "Category" },
  ]}
/>;