JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<ol role="list" class="coh-breadcrumb breadcrumbs show-1 coh-style-new-breadcrumbs-with-home-icon coh-ce-cpt_hero_carousel-39cbe814">
    <li role="listitem"> 
        <a href="/">
            <i class="home-icon"></i> Home
        </a>
    </li>
    <li class="li-breadcrumb-btn" style="display: none;">
        <button class="toggle-breadcrumb-btn" aria-label="Show more breadcrumbs" style="display: none;">
            <span aria-hidden="true"></span>
        </button>
    </li>
    <li role="listitem"> 
        <a href="/our-research">Our research</a>
    </li>
    <li role="listitem"> 
        <a href="/our-research/research-school-psychology">Research in the School of Psychology</a>
    </li>
    <li role="listitem"> 
        <a href="/our-research/research-school-psychology/refugee-mental-health-wellbeing-portal">Refugee Mental Health and Wellbeing Portal</a>
    </li>
    <li role="listitem"> 
        <a href="/our-research/research-school-psychology/refugee-mental-health-wellbeing-portal/resource-centre">Resource Centre</a>
    </li>
    <li role="listitem"> 
        <a href="/our-research/research-school-psychology/refugee-mental-health-wellbeing-portal/resource-centre/resources-refugee-asylum-seeking-children">Resources on Refugee & Asylum Seeking Children</a>
    </li>
    <li role="listitem"> 
        Mental Health Resources
    </li>
    <li class="lastSpanItem-breadcrumb" aria-current="page" role="listitem">
        <span></span>
    </li>
</ol>

CSS

.coh-breadcrumb {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust based on content */
    gap: 10px; /* Adjust gap between items as needed */
    align-items: center;
    width: 100%;
}

.coh-breadcrumb li {
    display: flex;
    align-items: center;
}

@media (min-width: 768px) { /* Adjust the breakpoint as needed */
    .coh-breadcrumb {
        grid-template-columns: auto auto repeat(auto-fit, minmax(150px, 1fr)); /* Three columns */
    }
    
    .coh-breadcrumb li:nth-child(1) {
        grid-column: 1; /* First item in the first column */
    }
    
    .coh-breadcrumb li:nth-child(2) {
        grid-column: 2; /* Second item in the second column */
    }
    
    .coh-breadcrumb li:nth-child(n+3) {
        grid-column: 3; /* Subsequent items start from the third column */
    }
}

@media (max-width: 767px) { /* Adjust the breakpoint as needed */
    .coh-breadcrumb {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Flexible columns for wrapping */
    }

    .coh-breadcrumb li {
        grid-column: span 1; /* Span one column for all items */
    }

    .coh-breadcrumb li:nth-child(1) {
        grid-column: auto; /* Aligns with flexible columns */
    }

    .coh-breadcrumb li:nth-child(2) {
        grid-column: auto; /* Aligns with flexible columns */
    }
    
    .coh-breadcrumb li:nth-child(n+3) {
        grid-column: auto; /* Aligns with flexible columns */
    }
}