ARTICLE AD BOX
I want to create a breadcrumb in HTML that right-aligns when it's so long to require scrolling. I'd like a solution that doesn't use JavaScript. My first approach was using scroll-driven animations, but it's unreliable. Does anyone have any ideas?
.container {
font-family: arial;
border: 2px solid;
padding: 20px;
height: 300px;
width: 320px;
max-width: 500px;
resize: horizontal;
overflow: auto;
}
.breadcrumb-list {
display: flex;
list-style-type: none;
gap: 1em;
padding: .5em;
margin: 0;
overflow-x: auto;
animation: detect-scroll forwards;
animation-timeline: scroll(x self);
li {
white-space: nowrap;
}
li:not(:last-child):after {
content:' |';
margin-left: .5em;
}
}
@keyframes detect-scroll {
from,to {
background-color: #ededed; /* it works with this */
justify-content: flex-end; /* but not with this */
}
}
<div class="container">
<h3>Normal: left aligned</small></h3>
<ul class="breadcrumb-list">
<li><a href="#">Home</a></li>
<li>My Account</li>
</ul>
<h3>If scrolling is necessary, breadcrumb should be right aligned, so article-name is in viewport</h3>
<ul class="breadcrumb-list">
<li><a href="#">Home</a></li>
<li><a href="#">Men</a></li>
<li><a href="#">Clothes</a></li>
<li><a href="#">Sweatshirts</a></li>
<li>Adidas Hoodie XL</li>
</ul>
</div>
5
This is not the only problem. Your leftmost menu item is partly hidden... But overflow is not demonstrated, you probably need more items to show. It is controlled by overflow. What's the problem with scrolling? What does it mean, unreliable, exactly? You just have to show to cases, when rendering is correct and what it is not.
2026-02-22 17:36:50 +00:00
Commented 14 hours ago
The menu is flickering rapidly in Chrome when hovered
2026-02-22 18:50:45 +00:00
Commented 13 hours ago
AFAIK, there is no CSS method of detecting overflow.
2026-02-22 20:13:40 +00:00
Commented 11 hours ago
Frankly, it would probably be easier to use justify-content: space-between; on the ul. justify-content is not animatable. which is why it probably does not work. codepen.io/Paulie-D/pen/XJjrMKd
2026-02-22 20:15:22 +00:00
Commented 11 hours ago