tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
52 lines (51 loc) • 2.75 kB
TypeScript
import React from "react";
/**
* `Breadcrumb` is a navigation component for displaying a breadcrumb trail, supporting theming and custom styles.
*
* @param {object} props - The properties to customize the `Breadcrumb` component.
* @param {{ label: string; href?: string }[]} props.items - Array of breadcrumb items with label and optional href.
* @param {React.ReactNode} [props.separator] - Custom separator element between items.
* @param {(href: string) => void} [props.onNavigate] - Callback when a breadcrumb link is clicked.
* @param {React.CSSProperties} [props.styles] - Custom styles for the breadcrumb container.
* @param {string} [props.className] - Additional className for the breadcrumb container.
* @param {string} [props.primaryColor] - Primary color for the breadcrumb background.
* @param {string} [props.textColor] - Text color for the breadcrumb.
* @param {string} [props.backgroundColor] - Background color for the breadcrumb (overrides primaryColor if provided).
* @param {string} [props.borderColor] - Border color for the breadcrumb.
* @param {string} [props.borderWidth] - Border width for the breadcrumb.
* @param {string} [props.borderStyle] - Border style for the breadcrumb.
* @param {number} [props.cornerRadius] - Border radius for the breadcrumb.
* @param {string} [props.fontFamily] - Font family for the breadcrumb.
* @param {number} [props.fontSize] - Font size for the breadcrumb.
* @param {string} [props.fontWeight] - Font weight for the breadcrumb.
* @param {string} [props.transitionDuration] - Transition duration for the breadcrumb.
* @param {number} [props.spacingfactor] - Spacing factor for the breadcrumb.
* @param {string} [props.hoverColor] - Hover color for breadcrumb links.
*
* @returns {JSX.Element} A styled breadcrumb navigation component.
*/
export interface BreadcrumbProps {
items: {
label: string;
href?: string;
}[];
separator?: React.ReactNode;
onNavigate?: (href: string) => void;
styles?: React.CSSProperties;
className?: string;
primaryColor?: string;
textColor?: string;
backgroundColor?: string;
borderColor?: string;
borderWidth?: string;
borderStyle?: string;
cornerRadius?: number;
fontFamily?: string;
fontSize?: number;
fontWeight?: string;
transitionDuration?: string;
spacingfactor?: number;
hoverColor?: string;
}
declare const Breadcrumb: ({ items, separator, onNavigate, styles, className, primaryColor, textColor, backgroundColor, borderColor, borderWidth, borderStyle, cornerRadius, fontFamily, fontSize, fontWeight, transitionDuration, spacingfactor, hoverColor, }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
export default Breadcrumb;