@yamada-ui/breadcrumb/dist/breadcrumb.d.ts

Yamada UI breadcrumb component

import * as _yamada_ui_core from '@yamada-ui/core';
import { HTMLUIProps, ThemeProps, Token, CSSUIProps } from '@yamada-ui/core';
import { IconProps } from '@yamada-ui/icon';
import { ReactNode, ReactElement } from 'react';

interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {
    name?: ReactNode;
    ellipsisPage?: boolean;
    /**
     *
     * @deprecated Use `ellipsisPage` instead.
     */
    isEllipsisPage?: boolean;
    containerProps?: Omit<BreadcrumbItemProps, "isLastChild" | "lastChild">;
}
interface BreadcrumbOptions {
    /**
     * The icon to be used in the ellipsis.
     */
    ellipsis?: ((props: {
        items: BreadcrumbGenerateItem[];
    }) => ReactNode) | ReactNode;
    /**
     * Number of elements visible on the end(right) edges.
     */
    endBoundaries?: Token<number>;
    /**
     * The left and right margin applied to the separator.
     *
     * @default '2'
     */
    gap?: CSSUIProps["mx"];
    /**
     * If provided, generate breadcrumb items based on items.
     */
    items?: BreadcrumbGenerateItem[];
    /**
     * The visual separator between each breadcrumb item.
     *
     * @default '/'
     */
    separator?: ReactElement | string;
    /**
     * Number of elements visible on the start(left) edges.
     */
    startBoundaries?: Token<number>;
    /**
     * Props for ol element.
     */
    listProps?: HTMLUIProps<"ol">;
    /**
     * Props for separator element.
     */
    separatorProps?: BreadcrumbSeparatorProps;
}
interface BreadcrumbProps extends Omit<HTMLUIProps<"nav">, "gap">, ThemeProps<"Breadcrumb">, BreadcrumbOptions {
}
/**
 * `Breadcrumb` is a component that helps users understand the hierarchy of a website.
 *
 * @see Docs https://yamada-ui.com/components/navigation/breadcrumb
 */
declare const Breadcrumb: _yamada_ui_core.Component<"nav", BreadcrumbProps>;
interface BreadcrumbItemOptions extends Pick<BreadcrumbProps, "gap" | "separator" | "separatorProps"> {
    /**
     * If `true`, change to span element.
     *
     * @default false
     */
    currentPage?: boolean;
    /**
     * If `true`, change to span element.
     *
     * @default false
     *
     * @deprecated Use `currentPage` instead.
     */
    isCurrentPage?: boolean;
    /**
     * If `true`, not show separator.
     *
     * @default false
     *
     * @deprecated Use `lastChild` instead.
     */
    isLastChild?: boolean;
    /**
     * If `true`, not show separator.
     *
     * @default false
     */
    lastChild?: boolean;
}
interface BreadcrumbItemProps extends Omit<HTMLUIProps<"li">, "gap">, BreadcrumbItemOptions {
}
declare const BreadcrumbItem: _yamada_ui_core.Component<"li", BreadcrumbItemProps>;
interface BreadcrumbLinkOptions {
    /**
     * If `true`, change to span element.
     *
     * @default false
     */
    currentPage?: boolean;
    /**
     * If `true`, change to span element.
     *
     * @default false
     *
     * @deprecated Use `currentPage` instead.
     */
    isCurrentPage?: boolean;
}
interface BreadcrumbLinkProps extends HTMLUIProps<"a">, BreadcrumbLinkOptions {
}
declare const BreadcrumbLink: _yamada_ui_core.Component<"a", BreadcrumbLinkProps>;
interface BreadcrumbSeparatorOptions {
    /**
     * The CSS `margin-inline-start`, and `margin-inline-end` property.
     */
    gap?: CSSUIProps["mx"];
}
interface BreadcrumbSeparatorProps extends Omit<HTMLUIProps<"span">, "gap">, BreadcrumbSeparatorOptions {
}
declare const BreadcrumbSeparator: _yamada_ui_core.Component<"span", BreadcrumbSeparatorProps>;
interface BreadcrumbEllipsisOptions {
}
interface BreadcrumbEllipsisProps extends IconProps, BreadcrumbEllipsisOptions {
}
declare const BreadcrumbEllipsis: _yamada_ui_core.Component<"span", BreadcrumbEllipsisProps>;

export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, type BreadcrumbGenerateItem, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };