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
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 | Default | 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" },
]}
/>;