@procore/core-react/dist/Breadcrumbs/Breadcrumbs.d.ts

React library of Procore Design Guidelines

import React from 'react';
import type { BreadcrumbCrumbProps, BreadcrumbProps } from './Breadcrumbs.types';
declare type NavCrumbProps = React.LiHTMLAttributes<HTMLLIElement> & BreadcrumbCrumbProps;
declare type LegacyCrumbProps = React.HTMLAttributes<HTMLDivElement> & BreadcrumbCrumbProps;
export declare const Crumb: React.ForwardRefExoticComponent<(NavCrumbProps | LegacyCrumbProps) & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
/**
 * @description  We use breadcrumbs to provide navigational information to the user on every
 * tool’s child page in Procore. The last element is the active view.
 *
 * __Important!__ Prior versions support placing an anchor element in-between `Breadcrumbs` and
 * `Breadcrumbs.Crumb` elements; going forward anchor elements must be inside `Breadcrumbs.Crumb`.
 *
 * Additionally __set `variant="list"` to enable list markup__, it will eventually be the default
 * but requires users to place hyperlinks inside the `Breadcrumbs.Crumb` (`li`) to be proper HTML.

BEFORE:
```
<Breadcrumbs>
  <a href="#">
    <Breadcrumbs.Crumb>Deprecated</Breadcrumbs.Crumb>
  </a>
</Breadcrumbs>
```

AFTER:
```
<Breadcrumbs variant="list">
  <Breadcrumbs.Crumb>
    <a href="#">Standard</a>
  </Breadcrumbs.Crumb>
</Breadcrumbs>
```

 @a11y Use `variant="list"` for semantic `ol`, `li` elements in addition to `nav`. When multiple
 breadcrumbs are in view, it is recommended each have an `aria-label` or `aria-labelledby`.

 @example
  <Breadcrumbs variant="list">
    <Breadcrumbs.Crumb>
      <a href="#">List Items</a>
    </Breadcrumbs.Crumb>
    <Breadcrumbs.Crumb active>
      Current Item
    <Breadcrumbs.Crumb>
  </Breadcrumbs>

 @since 10.19.0

 @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-breadcrumbs--demo)

 @see [Design Guidelines](https://design.procore.com/breadcrumb)

 */
export declare const Breadcrumbs: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & BreadcrumbProps & React.RefAttributes<HTMLElement>> & {
    Crumb: React.ForwardRefExoticComponent<(NavCrumbProps | LegacyCrumbProps) & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
};
export {};