Hover Breadcrumb

Breadcrumb with expanding hover segments

How to use it

Paste the HTML where the navigation & menus should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
No JavaScript needed.

<!-- Hover Breadcrumb · NedDev · eigen werk. -->
<div class="jouw-container">
<nav class="hbc" aria-label="Breadcrumb"><a class="hbc-item" href="#c-magnetic"><span class="hbc-dot"></span>Home</a><span class="hbc-sep">/</span><a class="hbc-item" href="#c-magnetic"><span class="hbc-dot"></span>Projecten</a><span class="hbc-sep">/</span><a class="hbc-item" href="#c-magnetic"><span class="hbc-dot"></span>NedDev</a><span class="hbc-sep">/</span><span class="hbc-item hbc-cur">Componenten</span></nav>
</div>

/* Hover Breadcrumb · NedDev · eigen werk. */
.hbc{display:flex;align-items:center;gap:4px;width:360px;flex-wrap:wrap;justify-content:center;font-family:'Switzer',sans-serif;font-size:13px}
.hbc-item{display:inline-flex;align-items:center;padding:6px 10px;color:rgba(10,10,10,.55);text-decoration:none;border-radius:9px;font-weight:600;transition:background .25s,color .25s}
.hbc-item:hover{background:rgba(245,72,15,.1);color:#F5480F}
.hbc-dot{width:0;height:6px;border-radius:50%;background:#F5480F;margin-right:0;transition:width .25s,margin .25s}
.hbc-item:hover .hbc-dot{width:6px;margin-right:7px}
.hbc-cur{color:#0a0a0a;background:rgba(10,10,10,.06);cursor:default}.hbc-sep{color:rgba(10,10,10,.25)}

More navigation & menus

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →