@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
92 lines (91 loc) • 3.21 kB
TypeScript
import { ComponentProps, ReactNode } from 'react';
import { AsChildProp } from '../../utils/misc';
/**
* Container for Breadcrumbs component.
*
* Can be used to construct complete Breadcrums UI.
* For batteries-included Breadcrumbs component - use {@link Breadcrumbs} instead.
*/
export declare const BreadcrumbsRoot: ({ ...props }: ComponentProps<"nav">) => import("react").JSX.Element;
/**
* List wrapper for breadcrumb items.
*/
export declare const BreadcrumbList: ({ className, ...props }: ComponentProps<"ol">) => import("react").JSX.Element;
/**
* Container for any breadcrumb list item: link, page or separator with menu.
*/
export declare const BreadcrumbItem: ({ className, ...props }: ComponentProps<"li">) => import("react").JSX.Element;
type BreadcrumbLinkProps = ComponentProps<"a"> & {
asChild?: AsChildProp;
};
/**
* Interactive Breadcrumb link. Used for non-active breadcrumbs.
*/
export declare const BreadcrumbLink: ({ asChild, className, ...props }: BreadcrumbLinkProps) => import("react").JSX.Element;
/**
* Currently active page.
*/
export declare const BreadcrumbPage: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
/**
* Breadcrumb separator component that visually separates breadcrumb items.
*
* @example
* ```tsx
* <BreadcrumbSeparator>
* <CustomIcon />
* </BreadcrumbSeparator>
* ```
*/
export declare const BreadcrumbSeparator: ({ children, className, ...props }: ComponentProps<"li">) => import("react").JSX.Element;
/**
* Ellipsis component for Breadcrumbs.
*
* Used to indicate truncated breadcrumb items when there are too many to display.
* Often used as a dropdown trigger to reveal hidden breadcrumb items.
* Includes proper accessibility attributes to ensure it's correctly presented to assistive technologies.
*
* @example
* ```tsx
* <BreadcrumbItem>
* <BreadcrumbEllipsis />
* </BreadcrumbItem>
* ```
*/
export declare const BreadcrumbEllipsis: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
interface BreadcrumbsProps {
breadcrumbs: Array<{
href: string;
label: ReactNode;
}>;
/**
* Represents the maximum number of breadcrumb elements to display.
* Any breadcrumbs beyond this number will be hidden behind a dropdown.
* @range [2, Infinity]
* @default 3
*/
maxToDisplay?: number;
}
/**
* Breadcrumbs component that provides a complete breadcrumbs UI, based on links.
*
* It composes smaller atomic breadcrumbs elements, which can be reused to create your own composition of Breadcrumbs.
*
* The component automatically handles:
* - Displaying the first and last breadcrumbs
* - Truncating middle breadcrumbs into a dropdown when exceeding maxToDisplay
* - Proper navigation using the configured router
* - Accessibility attributes
*
* @example
* ```tsx
* <Breadcrumbs
* breadcrumbs={[
* { label: "Home", href: "/" },
* { label: "Products", href: "/products" },
* { label: "Current Page", href: "/products/current" }
* ]}
* />
* ```
*/
export declare const Breadcrumbs: ({ breadcrumbs, maxToDisplay, }: BreadcrumbsProps) => import("react").JSX.Element;
export {};