Breadcrumb

View .md

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

Default

Loading interactive example. Full source is available below.

View example source
Download source
// 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;

Resources

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.
API referenceGenerated CoreAI prop and type summaries

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

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.

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

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.

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.

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

Breadcrumb Size

Loading interactive example. Full source is available below.

Download source
// 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

Loading interactive example. Full source is available below.

Download source
// 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

Loading interactive example. Full source is available below.

Download source
// 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;