# Breadcrumb

A breadcrumb helps people quickly understand where they are within the hierarchy of a large and complex site or app.

## Best practices

### Do

- The first, or logo, breadcrumb must always return the user to the homepage.
- Use breadcrumbs to reflect the information architecture of a project, not a historical trail.
- Truncate text over the character count limit of 30 characters.
- Expand on truncated breadcrumb items in a tooltip.
- Shorten names to avoid repetition or truncation.

### Don't

- Wrap long item names.
- Use a dropdown link for any breadcrumb item that isn’t a project.
- Repeat names in ways that make the breadcrumb harder to scan.
- Use breadcrumbs to track session history.

## Behavior and states

- Breadcrumbs never wrap, but they may scroll horizontally if not constrained.
- When the maximum width is exceeded, the breadcrumb collapses into an overflow menu, starting with the second item. The first and last items are always visible.
- Use a disabled breadcrumb item to indicate a step in the hierarchy with no associated landing page.
- By default, an interactive breadcrumb item label truncates when its name is longer than 30 characters, including spaces.
- A breadcrumb also may act as compact secondary navigation, providing one-click access to higher levels of the hierarchy, and back to the homepage.

## Default

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-breadcrumb--default.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Breadcrumb } from "@coreai-ds/react-components";
import { BreadcrumbItem } from "@coreai-ds/react-components";
import { BreadcrumbButton } from "@coreai-ds/react-components";
import { BreadcrumbDivider } from "@coreai-ds/react-components";
import { bundleIcon } from "@fluentui/react-icons";
import { CalendarMonthFilled } from "@fluentui/react-icons";
import { CalendarMonthRegular } from "@fluentui/react-icons";
import * as React from 'react';

const path = 'https://www.bing.com/';

const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);

export const Default = (): JSXElement => {
    return (<Breadcrumb aria-label="Breadcrumb default example">
      <BreadcrumbItem>
        <BreadcrumbButton href={path}>Item 1</BreadcrumbButton>
      </BreadcrumbItem>
      <BreadcrumbDivider />
      <BreadcrumbItem>
        <BreadcrumbButton href={path} icon={<CalendarMonth />}>
          Item 2
        </BreadcrumbButton>
      </BreadcrumbItem>
      <BreadcrumbDivider />
      <BreadcrumbItem>
        <BreadcrumbButton href={path}>Item 3</BreadcrumbButton>
      </BreadcrumbItem>
      <BreadcrumbDivider />
      <BreadcrumbItem>
        <BreadcrumbButton href={path} current>
          Item 4
        </BreadcrumbButton>
      </BreadcrumbItem>
    </Breadcrumb>);
};

export default Default;
```

## API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. `?` means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

### Breadcrumb API

Breadcrumb component - TODO: add more docs

```ts
interface BreadcrumbProps {
  as?: "nav";

  children?: any;

  className?: string;

  /**
   * Sets the focus behavior for the Breadcrumb.
   *
   * `tab`
   * This behaviour will cycle through all elements inside of the Breadcrumb when pressing the Tab key and then release focus
   * after the last inner element.
   *
   * `arrow`
   * This behaviour will cycle through all elements inside of the Breadcrumb when pressing the Arrow key.
   * @default 'tab'
   */
  focusMode?: "tab" | "arrow";

  /**
   * Ordered list which contains items.
   */
  list?: WithSlotShorthandValue<{ as?: "ol"; } & Omit<Omit<DetailedHTMLProps<OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & { ref?: ((instance: HTMLOListElement | null) => void) | RefObject<HTMLOListElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  ref?: Ref<HTMLElement>;

  /**
   * Controls size of Breadcrumb items and dividers.
   * @default 'medium'
   */
  size?: "small" | "medium" | "large";

  style?: CSSProperties;
}
```

### BreadcrumbButton API

A button component which is used inside the Breadcrumb.

```ts
interface BreadcrumbButtonProps {
  as?: "a" | "button";

  children?: any;

  className?: string;

  /**
   * Defines current sate of BreadcrumbButton.
   * @default false
   */
  current?: boolean;

  /**
   * A button can show that it cannot be interacted with.
   * @default false
   */
  disabled?: boolean;

  /**
   * When set, allows the button to be focusable even when it has been disabled.
   * This is used in scenarios where it is important to keep a consistent tab order
   * for screen reader and keyboard users. The primary example of this
   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.
   * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it
   * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this
   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.
   * @default false
   * false
   */
  disabledFocusable?: boolean;

  /**
   * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.
   */
  icon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  ref?: Ref<HTMLAnchorElement | HTMLButtonElement>;

  /**
   * Controls size of Breadcrumb items and dividers.
   * @default 'medium'
   */
  size?: "small" | "medium" | "large";

  style?: CSSProperties;
}
```

### BreadcrumbDivider API

A divider component which is used inside the Breadcrumb

```ts
interface BreadcrumbDividerProps {
  as?: "li";

  children?: any;

  className?: string;

  ref?: Ref<HTMLLIElement>;

  style?: CSSProperties;
}
```

### BreadcrumbItem API

BreadcrumbItem component is a wrapper for BreadcrumbLink and BreadcrumbButton.
It can be used as a non-interactive item.

```ts
interface BreadcrumbItemProps {
  as?: "li";

  children?: any;

  className?: string;

  ref?: Ref<HTMLLIElement>;

  /**
   * Controls size of Breadcrumb items and dividers.
   * @default 'medium'
   */
  size?: "small" | "medium" | "large";

  style?: CSSProperties;
}
```

## Implementation

CoreAI 0.12.0; Fluent 9.74.9.

[Setup and dependencies](/coreai-design-system/guides/Package.md).

Import components from `@coreai-ds/react-components`. CoreAI guidance above takes precedence over API demonstration examples.

## Breadcrumb Size

Source: Fluent, adapted for CoreAI.

[Download source](/coreai-design-system/source/examples/components-breadcrumb--breadcrumb-size.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Breadcrumb } from "@coreai-ds/react-components";
import { BreadcrumbItem } from "@coreai-ds/react-components";
import { BreadcrumbButton } from "@coreai-ds/react-components";
import { BreadcrumbDivider } from "@coreai-ds/react-components";
import { bundleIcon } from "@fluentui/react-icons";
import { CalendarMonth20Filled } from "@fluentui/react-icons";
import { CalendarMonth20Regular } from "@fluentui/react-icons";
import * as React from 'react';

const CalendarMonth = bundleIcon(CalendarMonth20Filled, CalendarMonth20Regular);

export const BreadcrumbSize = (): JSXElement => {
    return (<>
      <Breadcrumb aria-label="Small breadcrumb example with buttons" size="small">
        <BreadcrumbItem>
          <BreadcrumbButton>Item 1</BreadcrumbButton>
        </BreadcrumbItem>
        <BreadcrumbDivider />
        <BreadcrumbItem>
          <BreadcrumbButton icon={<CalendarMonth />}>Item 2</BreadcrumbButton>
        </BreadcrumbItem>
        <BreadcrumbDivider />
        <BreadcrumbItem>
          <BreadcrumbButton>Item 3</BreadcrumbButton>
        </BreadcrumbItem>
        <BreadcrumbDivider />
        <BreadcrumbItem>
          <BreadcrumbButton current>Item 4</BreadcrumbButton>
        </BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb aria-label="Medium breadcrumb example with buttons" size="medium">
        <BreadcrumbItem>
          <BreadcrumbButton>Item 1</BreadcrumbButton>
        </BreadcrumbItem>
        <BreadcrumbDivider />
        <BreadcrumbItem>
          <BreadcrumbButton icon={<CalendarMonth />}>Item 2</BreadcrumbButton>
        </BreadcrumbItem>
        <BreadcrumbDivider />
        <BreadcrumbItem>
          <BreadcrumbButton>Item 3</BreadcrumbButton>
        </BreadcrumbItem>
        <BreadcrumbDivider />
        <BreadcrumbItem>
          <BreadcrumbButton current>Item 4</BreadcrumbButton>
        </BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb aria-label="Large breadcrumb example with buttons" size="large">
        <BreadcrumbItem>
          <BreadcrumbButton>Item 1</BreadcrumbButton>
        </BreadcrumbItem>
        <BreadcrumbDivider />
        <BreadcrumbItem>
          <BreadcrumbButton icon={<CalendarMonth />}>Item 2</BreadcrumbButton>
        </BreadcrumbItem>
        <BreadcrumbDivider />
        <BreadcrumbItem>
          <BreadcrumbButton>Item 3</BreadcrumbButton>
        </BreadcrumbItem>
        <BreadcrumbDivider />
        <BreadcrumbItem>
          <BreadcrumbButton icon={<CalendarMonth />} current>
            Item 4
          </BreadcrumbButton>
        </BreadcrumbItem>
      </Breadcrumb>
    </>);
};

export default BreadcrumbSize;
```

## Breadcrumb With Overflow

Source: Fluent, adapted for CoreAI.

[Download source](/coreai-design-system/source/examples/components-breadcrumb--breadcrumb-with-overflow.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import type { PartitionBreadcrumbItems } from "@coreai-ds/react-components";
import type { ButtonProps } from "@coreai-ds/react-components";
import { partitionBreadcrumbItems } from "@coreai-ds/react-components";
import { bundleIcon } from "@fluentui/react-icons";
import { CalendarMonthFilled } from "@fluentui/react-icons";
import { CalendarMonthRegular } from "@fluentui/react-icons";
import { Overflow } from "@coreai-ds/react-components";
import { Breadcrumb } from "@coreai-ds/react-components";
import * as React from 'react';
import { OverflowItem } from "@coreai-ds/react-components";
import { BreadcrumbItem } from "@coreai-ds/react-components";
import { BreadcrumbButton } from "@coreai-ds/react-components";
import { OverflowDivider } from "@coreai-ds/react-components";
import { BreadcrumbDivider } from "@coreai-ds/react-components";
import { useOverflowMenu } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { Tooltip } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { MoreHorizontalFilled } from "@fluentui/react-icons";
import { MoreHorizontalRegular } from "@fluentui/react-icons";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { useIsOverflowItemVisible } from "@coreai-ds/react-components";
import { MenuItemLink } from "@coreai-ds/react-components";
const useExampleStyles = makeStyles({
    example: {
        backgroundColor: tokens.colorNeutralBackground2,
        overflow: 'hidden',
        padding: '5px',
        zIndex: 0, //stop the browser resize handle from piercing the overflow menu
        height: 'fit-content',
        minWidth: '200px',
        resize: 'horizontal',
        width: '600px',
    },
});
type Item = {
    key: number;
    item?: string;
    itemProps?: {
        icon?: ButtonProps['icon'];
        disabled?: boolean;
        href?: string;
    };
};
const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
const items: Item[] = [
    {
        key: 0,
        item: 'Item 0',
        itemProps: {
            href: 'https://react.fluentui.dev/',
        },
    },
    {
        key: 1,
        item: 'Item 1',
        itemProps: {
            icon: <CalendarMonth />,
            href: 'https://react.fluentui.dev/',
        },
    },
    {
        key: 2,
        item: 'Item 2',
        itemProps: {
            href: 'https://react.fluentui.dev/',
        },
    },
    {
        key: 3,
        item: 'Item 3',
        itemProps: {
            href: 'https://react.fluentui.dev/',
        },
    },
    {
        key: 4,
        item: 'Item 4',
        itemProps: {
            href: 'https://react.fluentui.dev/',
        },
    },
    {
        key: 5,
        item: 'Item 5',
        itemProps: {
            icon: <CalendarMonthRegular />,
            disabled: true,
            href: 'https://react.fluentui.dev/',
        },
    },
    {
        key: 6,
        item: 'Item 6',
        itemProps: {
            href: 'https://react.fluentui.dev/',
        },
    },
    {
        key: 7,
        item: 'Item 7',
        itemProps: {
            href: 'https://react.fluentui.dev/',
        },
    },
];
const OverflowGroupDivider: React.FC<{
    groupId: number;
}> = props => {
    return (<OverflowDivider groupId={props.groupId.toString()}>
      <BreadcrumbDivider data-group={props.groupId}/>
    </OverflowDivider>);
};
const renderBreadcrumbItem = (el: Item, isLastItem: boolean = false) => {
    return (<React.Fragment key={`button-items-${el.key}`}>
      <OverflowItem id={el.key.toString()} priority={isLastItem ? el.key : undefined} groupId={el.key.toString()}>
        <BreadcrumbItem>
          <BreadcrumbButton {...el.itemProps} current={isLastItem}>
            {el.item}
          </BreadcrumbButton>
        </BreadcrumbItem>
      </OverflowItem>
      {!isLastItem && <OverflowGroupDivider groupId={el.key}/>}
    </React.Fragment>);
};
const useTooltipStyles = makeStyles({
    tooltip: {
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
    },
});
const getTooltipContent = (breadcrumbItems: readonly Item[] | undefined) => {
    if (!breadcrumbItems) {
        return '';
    }
    return breadcrumbItems.reduce((acc, initialValue, idx, arr) => {
        return (<>
        {acc}
        {arr[0].item !== initialValue.item && ' > '}
        {initialValue.item}
      </>);
    }, <React.Fragment />);
};
const MoreHorizontal = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular);
const MenuItem: React.FC<{
    id: string;
    item: Item;
}> = props => {
    const { item, id } = props;
    const isVisible = useIsOverflowItemVisible(id);
    const href = item.itemProps?.href || '';
    if (isVisible) {
        return null;
    }
    return (<MenuItemLink {...item.itemProps} href={href}>
      {item.item}
    </MenuItemLink>);
};
const OverflowMenu = (props: PartitionBreadcrumbItems<Item>) => {
    const { overflowItems, startDisplayedItems, endDisplayedItems } = props;
    const { ref, isOverflowing, overflowCount } = useOverflowMenu<HTMLButtonElement>();
    const tooltipStyles = useTooltipStyles();
    if (!isOverflowing && overflowItems && overflowItems.length === 0) {
        return null;
    }
    const overflowItemsCount = overflowItems ? overflowItems.length + overflowCount : overflowCount;
    const tooltipContent = overflowItemsCount > 3
        ? `${overflowItemsCount} items`
        : {
            children: getTooltipContent(overflowItems),
            className: tooltipStyles.tooltip,
        };
    return (<BreadcrumbItem>
      <Menu hasIcons>
        <MenuTrigger disableButtonEnhancement>
          <Tooltip withArrow content={tooltipContent} relationship="label">
            <Button id="components-breadcrumb--breadcrumb-with-overflow-menu" appearance="subtle" ref={ref} icon={<MoreHorizontal />} aria-label={`${overflowItemsCount} more items`} role="button"/>
          </Tooltip>
        </MenuTrigger>
        <MenuPopover>
          <MenuList>
            {isOverflowing &&
            startDisplayedItems.map((item: Item) => <MenuItem id={item.key.toString()} item={item} key={item.key}/>)}
            {overflowItems &&
            overflowItems.map((item: Item) => <MenuItem id={item.key.toString()} item={item} key={item.key}/>)}
            {isOverflowing &&
            endDisplayedItems &&
            endDisplayedItems.map((item: Item) => <MenuItem id={item.key.toString()} item={item} key={item.key}/>)}
          </MenuList>
        </MenuPopover>
      </Menu>
    </BreadcrumbItem>);
};
const BreadcrumbOverflowExample = () => {
    const styles = useExampleStyles();
    const { startDisplayedItems, overflowItems, endDisplayedItems }: PartitionBreadcrumbItems<Item> = partitionBreadcrumbItems({
        items,
        maxDisplayedItems: 5,
    });
    const hasHiddenItems = overflowItems && overflowItems.length > 0;
    return (<div className={styles.example}>
      <Overflow hasHiddenItems={hasHiddenItems}>
        <Breadcrumb>
          {startDisplayedItems.map((item: Item) => renderBreadcrumbItem(item, false))}
          <OverflowMenu overflowItems={overflowItems} startDisplayedItems={startDisplayedItems} endDisplayedItems={endDisplayedItems}/>
          <BreadcrumbDivider />
          {endDisplayedItems &&
            endDisplayedItems.map((item: Item) => {
                const isLastItem = item.key === items.length - 1;
                return renderBreadcrumbItem(item, isLastItem);
            })}
        </Breadcrumb>
      </Overflow>
    </div>);
};
export const BreadcrumbWithOverflow = (): JSXElement => {
    return <BreadcrumbOverflowExample />;
};

export default BreadcrumbWithOverflow;
```

## Breadcrumb With Tooltip

Source: Fluent, adapted for CoreAI.

[Download source](/coreai-design-system/source/examples/components-breadcrumb--breadcrumb-with-tooltip.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import type { PartitionBreadcrumbItems } from "@coreai-ds/react-components";
import { partitionBreadcrumbItems } from "@coreai-ds/react-components";
import { Breadcrumb } from "@coreai-ds/react-components";
import * as React from 'react';
import { isTruncatableBreadcrumbContent } from "@coreai-ds/react-components";
import { BreadcrumbItem } from "@coreai-ds/react-components";
import { Tooltip } from "@coreai-ds/react-components";
import { BreadcrumbButton } from "@coreai-ds/react-components";
import { truncateBreadcrumbLongName } from "@coreai-ds/react-components";
import { BreadcrumbDivider } from "@coreai-ds/react-components";
import { useOverflowMenu } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { bundleIcon } from "@fluentui/react-icons";
import { MoreHorizontalFilled } from "@fluentui/react-icons";
import { MoreHorizontalRegular } from "@fluentui/react-icons";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { useIsOverflowItemVisible } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
type Item = {
    key: number;
    item: string;
};
const itemsWithLongNames: Item[] = [
    {
        key: 0,
        item: 'Item 1',
    },
    {
        key: 1,
        item: 'Item 2',
    },
    {
        key: 2,
        item: "Item 3 is long. Don't think about what you want to be, but what you want to do.",
    },
    {
        key: 3,
        item: 'Item 4',
    },
    {
        key: 4,
        item: 'Item 5 which is longer than 30 characters',
    },
];
const items: Item[] = [
    {
        key: 0,
        item: 'Item 1',
    },
    {
        key: 1,
        item: 'Item 2',
    },
    {
        key: 2,
        item: 'Item 3',
    },
    {
        key: 3,
        item: 'Item 4',
    },
    {
        key: 4,
        item: 'Item 5',
    },
    {
        key: 5,
        item: 'Item 6',
    },
    {
        key: 6,
        item: 'Item 7',
    },
    {
        key: 7,
        item: 'Item 8',
    },
];
function renderItem(entry: Item, isLastItem: boolean) {
    return (<React.Fragment key={`item-${entry.key}`}>
      {isTruncatableBreadcrumbContent(entry.item, 30) ? (<BreadcrumbItem>
          <Tooltip withArrow content={entry.item} relationship="label">
            <BreadcrumbButton current={isLastItem}>{truncateBreadcrumbLongName(entry.item)}</BreadcrumbButton>
          </Tooltip>
        </BreadcrumbItem>) : (<BreadcrumbItem>
          <BreadcrumbButton current={isLastItem}>{entry.item}</BreadcrumbButton>
        </BreadcrumbItem>)}

      {!isLastItem && <BreadcrumbDivider />}
    </React.Fragment>);
}
const useTooltipStyles = makeStyles({
    tooltip: {
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
    },
});
const getTooltipContent = (breadcrumbItems: readonly Item[] | undefined) => {
    if (!breadcrumbItems) {
        return '';
    }
    return breadcrumbItems.reduce((acc, initialValue, idx, arr) => {
        return (<>
        {acc}
        {arr[0].item !== initialValue.item && ' > '}
        {initialValue.item}
      </>);
    }, <React.Fragment />);
};
const MoreHorizontal = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular);
const BreadcrumbMenuItem: React.FC<{
    item: Item;
}> = props => {
    const { item } = props;
    const isVisible = useIsOverflowItemVisible(item.key.toString());
    if (isVisible) {
        return null;
    }
    return <MenuItem>{item.item}</MenuItem>;
};
const MenuWithTooltip = (props: PartitionBreadcrumbItems<Item>) => {
    const { overflowItems, startDisplayedItems, endDisplayedItems } = props;
    const { ref, isOverflowing, overflowCount } = useOverflowMenu<HTMLButtonElement>();
    const tooltipStyles = useTooltipStyles();
    if (!isOverflowing && overflowItems && overflowItems.length === 0) {
        return null;
    }
    const overflowItemsCount = overflowItems ? overflowItems.length + overflowCount : overflowCount;
    const tooltipContent = overflowItemsCount > 3
        ? `${overflowItemsCount} items`
        : {
            children: getTooltipContent(overflowItems),
            className: tooltipStyles.tooltip,
        };
    return (<Menu hasIcons>
      <MenuTrigger disableButtonEnhancement>
        <Tooltip withArrow content={tooltipContent} relationship="label">
          <Button id="components-breadcrumb--breadcrumb-with-tooltip-menu" appearance="subtle" ref={ref} icon={<MoreHorizontal />} aria-label={`${overflowItemsCount} more items`} role="button"/>
        </Tooltip>
      </MenuTrigger>
      <MenuPopover>
        <MenuList>
          {isOverflowing && startDisplayedItems.map((item: Item) => <BreadcrumbMenuItem item={item} key={item.key}/>)}
          {overflowItems && overflowItems.map((item: Item) => <BreadcrumbMenuItem item={item} key={item.key}/>)}
          {isOverflowing &&
            endDisplayedItems &&
            endDisplayedItems.map((item: Item) => <BreadcrumbMenuItem item={item} key={item.key}/>)}
        </MenuList>
      </MenuPopover>
    </Menu>);
};
const BreadcrumbWithTooltipExample = () => {
    const { startDisplayedItems, overflowItems, endDisplayedItems }: PartitionBreadcrumbItems<Item> = partitionBreadcrumbItems({
        items,
        maxDisplayedItems: 3,
    });
    const lastIdx = items.length - 1;
    return (<Breadcrumb aria-label="breadcrumb-with-tootip">
      {startDisplayedItems.map(item => renderItem(item, lastIdx === item.key))}
      {overflowItems && (<MenuWithTooltip overflowItems={overflowItems} startDisplayedItems={startDisplayedItems} endDisplayedItems={endDisplayedItems}/>)}
      {endDisplayedItems && endDisplayedItems.map(item => renderItem(item, lastIdx === item.key))}
    </Breadcrumb>);
};
export const BreadcrumbWithTooltip = (): JSXElement => {
    const itemsLength = itemsWithLongNames.length - 1;
    return (<>
      <h3>Breadcrumb with a tooltip</h3>
      <BreadcrumbWithTooltipExample aria-label="breadcrumb-with-tooltip"/>
      <h3>Breadcrumb with long names</h3>
      <Breadcrumb aria-label="breadcrumb-with-long-names">
        {itemsWithLongNames.map(item => renderItem(item, itemsLength === item.key))}
      </Breadcrumb>
    </>);
};

export default BreadcrumbWithTooltip;
```

## Resources

- [Figma component](https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=133494-14993)
- [Fluent guidance](https://fluent2.microsoft.design/components/web/react/core/breadcrumb/usage)