If your breadcrumbs navigation is getting too large, here's a nice diazo trick to collapse the third to second to last items in the breadcrumbs. It will look similar to the Gitlab's breadcrumbs.
Code
<rules css:if-content="#portal-breadcrumbs > div > ol[aria-labelledby='breadcrumbs-you-are-here'] li:nth-child(5)"
css:content="#portal-breadcrumbs > div > ol[aria-labelledby='breadcrumbs-you-are-here']">
<!-- Check if there are at least 5 items in the breadcrumbs, if True, then collapse it. -->
<replace css:content-children="#portal-breadcrumbs > div > ol[aria-labelledby='breadcrumbs-you-are-here']">
<!-- Modify Plone's breadcrumbs before it is rendered into the theme -->
<xsl:copy-of css:select="li:nth-child(1)" />
<xsl:copy-of css:select="li:nth-child(2)" />
<!-- Add the first two items to the breadcrumbs -->
<li id="breadcrumbs-ellipsis" class=" breadcrumb-main-dropdown">
<!-- Collapse all items after the second item and before the second to last item in the breadcrumbs -->
<a href="#">...</a>
<ul class="dropdown-menu w-dropdown-list gl-dropdown-list" aria-labelledby="breadcrumbs-you-are-here">
<xsl:copy-of css:select="li:not(:nth-child(1)):not(:nth-child(2)):not(:nth-last-child(2)):not(:nth-last-child(1))" />
</ul>
</li>
<!-- Add the last two items to the breadcrumbs -->
<xsl:copy-of css:select="li:nth-last-child(2)" />
<xsl:copy-of css:select="li:nth-last-child(1)" />
</replace>
</rules>