@dnb/eufemia/components/breadcrumb/Breadcrumb.d.ts

DNB Eufemia Design System UI Library

import type { HTMLProps, MouseEventHandler, ReactElement, ReactNode, Ref } from 'react';
import type { SpaceTypeAll, SpaceTypeMedia, SpacingProps } from '../../shared/types';
import type { SkeletonShow } from '../skeleton/Skeleton';
import type { BreadcrumbItemProps } from './BreadcrumbItem';
import BreadcrumbItem from './BreadcrumbItem';
export type BreadcrumbProps = {
    /**
     * Custom `className` for the component root.
     */
    className?: string;
    /**
     * If set to `true`, an overlaying skeleton with animation will be shown.
     */
    skeleton?: SkeletonShow;
    /**
     * List of pages to render as breadcrumb items. Each object in data can include all properties from [BreadcrumbItem properties](/uilib/components/breadcrumb/properties#breadcrumbitem-properties).
     */
    data?: Array<BreadcrumbItemProps>;
    /**
     * Content of the component. Can be used instead of property `data`, by adding `Breadcrumb.Item` children `<Breadcrumb.Item {...properties} />`.
     */
    children?: ReactElement<BreadcrumbItemProps> | Array<ReactElement<BreadcrumbItemProps>>;
    /**
     * Defaults to `responsive` or `single` depending on content. Options: `responsive` | `single` | `multiple` | `collapse`.
     */
    variant?: 'responsive' | 'single' | 'multiple' | 'collapse';
    /**
     * Will be called by user click interaction, to handle click event on "Back" for variant `single` and "Back to..." for variant `collapse`.
     */
    onClick?: MouseEventHandler<HTMLButtonElement>;
    /**
     * For variant `single`, set `href` for button click. Can be used instead of event/property `onClick`.
     */
    href?: string;
    /**
     * Every `<nav>` on a page needs a unique `aria-label` text.
     */
    navText?: ReactNode;
    /**
     * Override with a custom 'Back' text for variant `single` (Not recommended).
     */
    goBackText?: ReactNode;
    /**
     * Override with a custom 'Home' text (Not recommended).
     */
    homeText?: ReactNode;
    /**
     * Override with a custom 'Back to...' text (Not recommended).
     */
    backToText?: ReactNode;
    /**
     * For variant `collapse`, override collapsed state for the collapsed content by updating this value using the provided property `onClick`.
     */
    collapsed?: boolean;
    /**
     * Include spacing properties in breadcrumb. If only `true` is given, the spacing will be `small`. Defaults to `false`.
     */
    spacing?: SpaceTypeAll | SpaceTypeMedia;
    /**
     * Disables the height animation. Defaults to `false`.
     */
    noAnimation?: boolean;
    /**
     * Will be called when breadcrumb expands or collapses.
     */
    onToggle?: (collapsed: boolean) => void;
    /**
     * Send along a custom React Ref.
     * Default: `null`
     */
    ref?: Ref<HTMLElement>;
};
export type BreadcrumbAllProps = BreadcrumbProps & SpacingProps & Omit<HTMLProps<HTMLElement>, keyof BreadcrumbProps>;
declare const Breadcrumb: {
    (localProps: BreadcrumbAllProps): import("react/jsx-runtime").JSX.Element;
    Item: (localProps: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
};
export { BreadcrumbItem };
export default Breadcrumb;