Auto-Collapsing breadcrumbs via Diazo

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.

Osoobe   Jamaican Developers   JaD Website Bundle   jamaicandevelopers com · GitLab


<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))" />
        <!-- 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)" />

I'm using Webflow dropdown, so you might want to change it to bootstrap dropdown by change the classes in the ul and li.breadcrum-main-dropdown