@atlaskit/breadcrumbs
Version:
Breadcrumbs are a navigation system used to show a user's location in a site or app.
61 lines (60 loc) • 2.09 kB
TypeScript
import { type BreadcrumbsSize } from './internal/breadcrumbs-size-context';
export interface BreadcrumbsRootProps {
/**
* The breadcrumb items to render. Typically `BreadcrumbsItemPrimitive` or
* `BreadcrumbsCurrentItem` components.
*/
children: React.ReactNode;
/**
* An accessible label for the breadcrumb navigation landmark.
*/
label?: string;
/**
* The size variant. `'small'` uses `font.body.small` and 16px icon sizing.
* Passed via context to all child items — no need to set it on each item.
*
* @default 'medium'
*/
size?: BreadcrumbsSize;
/**
* A `testId` prop is provided for specified elements, which is a unique string
* that appears as a data attribute `data-testid` in the rendered code,
* serving as a hook for automated tests.
*/
testId?: string;
/**
* Inline styles applied to the outer `<nav>` element. Useful for constraining
* width when demonstrating overflow collapse behaviour.
*/
style?: React.CSSProperties;
}
/**
* __BreadcrumbsRoot__
*
* A primitive breadcrumbs container that renders a `<nav>` + `<ol>` with correct
* ARIA semantics and design tokens, without any built-in overflow/collapse behaviour.
*
* Use this together with `BreadcrumbsItemPrimitive` and `useOverflowCollapse` to
* compose custom breadcrumb experiences.
*
* @example
* ```tsx
* const { collapsedIndices, registerItem, registerContainer } = useOverflowCollapse(items.length);
*
* <BreadcrumbsRoot ref={registerContainer} label="Breadcrumbs">
* {items.map((item, i) =>
* collapsedIndices.has(i) ? null : (
* <BreadcrumbsItemPrimitive
* key={item.href}
* ref={registerItem(i)}
* href={item.href}
* text={item.text}
* aria-current={i === items.length - 1 ? 'page' : undefined}
* />
* )
* )}
* </BreadcrumbsRoot>
* ```
*/
declare const BreadcrumbsRoot: React.ForwardRefExoticComponent<BreadcrumbsRootProps & React.RefAttributes<HTMLElement>>;
export default BreadcrumbsRoot;