DEV Community

Alexander
Alexander

Posted on

Hide breadcrumbs div based on its content overflow

This is my HTML:

<div class="header">

    <div class="header__right">
     <span id="theme_switcher" class="lightbulb-icon"><i class="fas fa-sun"></i></span>        
    <span id="navIcon">≡</span>
    </div>

    <a href="/" data-google-interstitial="false"><img src="/AlmarsImages/Website/logo.png" alt="Logo"></a>
    <div id="breadcrumbs"><a href="/retro">retro</a> &gt; <a href="/retro/walkthroughs">walkthroughs</a> &gt; <a href="/retro/walkthroughs/gamecube">gamecube</a> &gt; <a href="/retro/walkthroughs/gamecube/games">games</a> &gt; <a href="/retro/walkthroughs/gamecube/games/animalcrossing">animalcrossing</a> &gt; <a href="/retro/walkthroughs/gamecube/games/animalcrossing/eventcalendar">eventcalendar</a></div>
  </div>
Enter fullscreen mode Exit fullscreen mode

Now, css for "header__right is:

.header .header__right {
position: fixed;
right: 30px;
color: #fff;
line-height: 60px;
font-size: 20px;
cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

CSS for "breadcrumbs" is:

#breadcrumbs {
margin-left: 280px;
margin-top: 16px;
color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

And I got this script:

function updateBreadcrumbs() {
var url = window.location.pathname;
var breadcrumbContainer = document.getElementById('breadcrumbs');

// Split the URL by '/' to get individual folder names
var folders = url.split('/').filter(function (folder) {
    return folder !== ''; // Remove empty elements
});

// If on the homepage, display an empty div
if (folders.length === 0) {
    breadcrumbContainer.innerHTML = '';
} else {
    // Generate the breadcrumb trail with clickable links
    var breadcrumbTrail = '';
    var folderPath = '';
    for (var i = 0; i < folders.length; i++) {
        folderPath += '/' + folders[i];
        var lowercaseFolderName = folders[i].toLowerCase(); // Convert folder name to lowercase
        breadcrumbTrail += ' > <a href="' + folderPath + '">' + lowercaseFolderName + '</a>';
    }
    breadcrumbContainer.innerHTML = breadcrumbTrail.substring(3); // Remove the initial ' > '
}
}
// Call the function when the page loads and whenever the URL changes
window.onload = updateBreadcrumbs;
window.onpopstate = updateBreadcrumbs;
Enter fullscreen mode Exit fullscreen mode

The thing is, I want my breadcrumbs div to hide once the content in it breaks the line (overflow horizontall). However, we also must take in consideration that before content even reaches overflow, the "header__right" will overlap the content anyway. So, that can be a problem too. If this overlap happens, it should be gone too (breadcrumbs).

Top comments (0)