'How to make noWrap work with Breadcrumbs?

I'm trying to make the MUI component Breadcrumbs responsive:

When the Breadcrumbs component takes all of its space, its items shrink using ellipsis like any Typography component with noWrap prop set.

I know it has itemsBeforeCollapse, itemsAfterCollapse and maxItems props but these props are about item number compared to viewport size, not about each item width.

I tried to set the noWrap property to Typography and Link components (as it extends Typography props), but the ellipsis does not show up and the Link or Typography component does not shrink.

<Breadcrumbs>
  {links.map((link, i) =>
    i !== links.length - 1 ? (
      <Link
        key={i}
        underline={'hover'}
        noWrap
      >
        {link}
      </Link>
    ) : (
      <Typography noWrap key={i}>
        {link}
      </Typography>
    ),
  )}
</Breadcrumbs>

You can reproduce the issue on this codeSandbox:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to make noWrap work with Breadcrumbs?

Sources

Related Questions