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";

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

Parametros

Parametro	Tipo	Requerido	Default	Descripcion
links	BreadcrumbLinkProps[]	si		Lista de links para el componente
className	string	no	""	Clase personalizada del componente
classNameItem	string	no	""	Clase personalizada de los items
classNameLink	string	no	""	Clase personalizada de los links

Parametros de los links (BreadcrumbLinkProps)

Parametro	Tipo	Requerido	Descripcion
href	string	si	Url del link
children	ReactNode	si	Contenido del link
onClick	function	no	Funcion 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" },
  ]}
/>;

Box Button