@itwin/itwinui-react/esm/core/Breadcrumbs/Breadcrumbs.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
type BreadcrumbsProps = {
    /**
     * Index of the currently active breadcrumb.
     * Defaults to the index of the last breadcrumb item.
     */
    currentIndex?: number;
    /**
     * Breadcrumb items.
     */
    children: React.ReactNode[];
    /**
     * Specify a custom separator element to show between breadcrumb items.
     * Defaults to the `SvgChevronRight` icon.
     */
    separator?: React.ReactNode;
    /**
     * If specified, this prop will be used to show a custom button when overflow happens,
     * i.e. when there is not enough space to fit all the breadcrumbs.
     *
     * Expects a function that takes the number of items that are visible
     * and returns the `ReactNode` to render.
     *
     * @example <caption>Uses the overflow button to redirect to the previous breadcrumb</caption>
     *  <Breadcrumbs
     *    overflowButton={(visibleCount: number) => {
     *      const previousBreadcrumb = visibleCount > 1 ? items.length - visibleCount : items.length - 2;
     *      return (
     *        <Tooltip content={`Item ${previousBreadcrumb}`} placement='bottom'>
     *          <IconButton
     *            onClick={() => {
     *              // click on "previousBreadcrumb"
     *            }}
     *          >
     *            <SvgMoreSmall />
     *          </IconButton>
     *        </Tooltip>
     *      );
     *    }}
     *  >
     *    {items}
     *  </Breadcrumbs>
     *
     * @example <caption>Uses the overflow button to add a dropdown that contains hidden breadcrumbs</caption>
     *  <Breadcrumbs
     *    overflowButton={(visibleCount) => (
     *      <DropdownMenu
     *        menuItems={(close) =>
     *          Array(items.length - visibleCount)
     *            .fill(null)
     *            .map((_, _index) => {
     *              const index = visibleCount > 1 ? _index + 1 : _index;
     *              const onClick = () => {
     *                // click on "index" breadcrumb
     *                close();
     *              };
     *              return (
     *                <MenuItem key={index} onClick={onClick}>
     *                  Item {index}
     *                </MenuItem>
     *              );
     *            })
     *        }
     *      >
     *        <IconButton>
     *          <SvgMoreSmall />
     *        </IconButton>
     *      </DropdownMenu>
     *    )}
     *  >
     *    {items}
     *  </Breadcrumbs>
     */
    overflowButton?: (visibleCount: number) => React.ReactNode;
};
export declare const Breadcrumbs: PolymorphicForwardRefComponent<"nav", BreadcrumbsProps> & {
    /**
     * Breadcrumbs item subcomponent
     *
     * @example
     * <Breadcrumbs.Item>Breadcrumb Item Title</Breadcrumbs.Item>
     *
     * @example
     * <Breadcrumbs.Item href='https://www.example.com/'>Breadcrumb Anchor Title</Breadcrumbs.Item>
     *
     * @example
     * <Breadcrumbs.Item onClick={() => {}}><SvgCalendar /></Breadcrumbs.Item>
     */
    Item: PolymorphicForwardRefComponent<"a", {}>;
};
export {};