StofliUI - Librería de componentes UI accesibles y personalizables

Cargando...

import { Breadcrumbs } from "stofli-ui";

Cargando...

Un ejemplo básico de breadcrumbs con múltiples niveles.

Cargando...

Usando la prop homeIcon para mostrar un icono de inicio.

Cargando...

Usando la prop size: sm, md y lg.

Cargando...

Usando la prop variant: default, primary, secondary, success, warning y danger.

Cargando...

Personaliza el separador usando la prop separator.

Cargando...

Añade iconos a los elementos del breadcrumb.

Cargando...

Puedes personalizar cualquier parte de los breadcrumbs usando las propiedades de className con clases de Tailwind CSS.

Cargando...

Prop	Tipo	Default	Descripción
`items`	`{ label: string; href?: string; icon?: React.ReactNode; className?: string; ariaLabel?: string }[]`	`[]`	Elementos de la ruta de navegación
`separator`	`React.ReactNode`	`<ChevronRight />`	Icono o texto separador entre elementos
`homeIcon`	`boolean`	`false`	Muestra un icono de inicio al principio
`clickable`	`boolean`	`false`	Determina si los items son enlaces
`variant`	`"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "danger"`	`"default"`	Variante de estilo
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tamaño del componente
`className`	`string`	-	Clases adicionales para el componente nav
`olClassName`	`string`	-	Clases adicionales para la lista ol
`itemClassName`	`string`	-	Clases adicionales para los items li
`separatorClassName`	`string`	-	Clases adicionales para los separadores
`homeIconClassName`	`string`	-	Clases adicionales para el icono de inicio
`currentItemClassName`	`string`	-	Clases adicionales para el item actual
`linkClassName`	`string`	-	Clases adicionales para los enlaces
`navAriaLabel`	`string`	`"Navegación de Breadcrumbs"`	Etiqueta ARIA para el elemento nav
`homeAriaLabel`	`string`	`"Ir a la página de inicio"`	Etiqueta ARIA para el icono de inicio
`separatorAriaLabel`	`string`	`"Separador"`	Etiqueta ARIA para los separadores

Breadcrumbs