@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
46 lines (45 loc) • 1.92 kB
TypeScript
import { SelectedAriaAttributes } from '../../types';
import { BreadcrumbAriaAttributes } from './Breadcrumb.utils';
import { JSX } from 'react';
export interface BreadcrumbLink {
/** The link label text. */
label: string;
/** The href for the link if no framework-specific link component wrapper is provided. */
href?: string;
/** Name of the icon to display.*/
iconName?: string;
/** The framework-specific link component wrapper, e.g., `Link` for `next` or `react-router-dom`. */
wrapper?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
}
export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
/** ARIA attributes to ensure accessibility
*
* `{'aria-label'? string;`
* `'aria-labelledby'?: string;}`
* */
aria: SelectedAriaAttributes<BreadcrumbAriaAttributes>;
/** Breadcrumb link array structure with optional and required parameters
* `{ label: string;`
* `href?: string;`
* `iconName?: IconName;`
* `wrapper?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;}[]`
*/
links: BreadcrumbLink[];
/** Show all (...) button props:
*
* `data-*`: Custom data attributes.
*
* `label`: Accessibility label for the show all button.
* (default) 'Show all links'
*/
showAllButtonProps?: {
[key: `data-${string}`]: string | undefined;
label?: string;
};
}
/**
* A breadcrumb provides orientation to users within the structure of a website or application.
*
* Design in Figma: [Breadcrumb](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=23527-3393)
* */
export declare const DSBreadcrumb: ({ aria, className, links, showAllButtonProps, ...rest }: BreadcrumbProps) => JSX.Element;