Collapsed Breadcrumb Hover
A long breadcrumb folded into an ellipsis that unfolds into the hidden levels on hover or focus. Two one-column grids animate 1fr to 0fr and back, so no width is hard-coded.
Also known as: breadcrumb hover css, breadcrumb ellipsis expand, truncated breadcrumbs on hover.
HTML
<nav class="hfx-breadcrumb-collapse" aria-label="Breadcrumb">
<a href="#">Home</a>
<span class="hfx-breadcrumb-collapse-more">
<span class="hfx-breadcrumb-collapse-dots"><span><button aria-label="Show full path">…</button></span></span>
<span class="hfx-breadcrumb-collapse-path"><span><a href="#">Projects</a><a href="#">Website</a></span></span>
</span>
<a href="#" aria-current="page">Pricing</a>
</nav>CSS
.hfx-breadcrumb-collapse {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
display: flex;
align-items: center;
font-family: system-ui, sans-serif;
font-weight: 500;
white-space: nowrap;
}
.hfx-breadcrumb-collapse a {
color: color-mix(in srgb, currentColor 62%, transparent);
text-decoration: none;
transition: color 0.2s ease;
}
.hfx-breadcrumb-collapse a:is(:hover, :focus-visible) { color: var(--c); }
.hfx-breadcrumb-collapse a[aria-current] {
color: inherit;
font-weight: 650;
}
/* separators */
.hfx-breadcrumb-collapse-dots > span::before,
.hfx-breadcrumb-collapse-path a::before,
.hfx-breadcrumb-collapse a[aria-current]::before {
content: "/";
margin: 0 0.55em;
color: color-mix(in srgb, var(--c) 55%, transparent);
}
.hfx-breadcrumb-collapse-more { display: flex; }
.hfx-breadcrumb-collapse-dots,
.hfx-breadcrumb-collapse-path {
display: inline-grid;
transition: grid-template-columns 0.45s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
}
.hfx-breadcrumb-collapse-dots { grid-template-columns: 1fr; }
.hfx-breadcrumb-collapse-path {
grid-template-columns: 0fr;
opacity: 0;
}
.hfx-breadcrumb-collapse-dots > span,
.hfx-breadcrumb-collapse-path > span {
display: flex;
align-items: center;
min-width: 0;
overflow: hidden;
}
.hfx-breadcrumb-collapse button {
padding: 0 0.45em 0.3em;
border: 0;
border-radius: 0.4em;
background: color-mix(in srgb, var(--c) 14%, transparent);
color: var(--c);
font: inherit;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
}
.hfx-breadcrumb-collapse-more:is(:hover, :focus-within) .hfx-breadcrumb-collapse-dots {
grid-template-columns: 0fr;
opacity: 0;
}
.hfx-breadcrumb-collapse-more:is(:hover, :focus-within) .hfx-breadcrumb-collapse-path {
grid-template-columns: 1fr;
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.hfx-breadcrumb-collapse, .hfx-breadcrumb-collapse *, .hfx-breadcrumb-collapse::before, .hfx-breadcrumb-collapse::after, .hfx-breadcrumb-collapse *::before, .hfx-breadcrumb-collapse *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.