<nav class="breadcrumbs">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Backyard</a></li>
        <li><a href="#">Tree</a></li>
        <li><a href="#">Treehouse</a></li>
        <li><a href="#">Window</a></li>
        <li><a href="#">Plant</a></li>
        <li><a href="#">Leaf</a></li>
        <li><a href="#">Bug</a></li>
        <li><a href="#">Final Solution To Getting Rid of All Bugs</a></li>
    </ul>
</nav>
<div style="max-width:50rem;padding:1rem">
    <h1>Right aligned scrollbar</h1>
    <p>No JavaScript because why would you? :)</p>
    <p>A CSS-based solution is superior because you avoid a layout shift during app bootstrap.</p>
    <p>A variant of this used to be the implementation over at <a rel="nofollow" href="https://www.verkkokauppa.com">Verkkokauppa.com</a>, however their current one relies on JavaScript. They are building a component library which seem to ignore the code and solutions that existed in the earlier implementations.</p>
    <p>How can you tell that a solution is based on CSS or JS? A JS-based solution doesn't dynamically react to changing viewport size, it only fixes the scroll position during bootstrap. In other words: resize browser, if the right align doesn't work when coming from wider size to narrower size then the solution is JS-based.</p>
</div>

.breadcrumbs {
    // make container scrollable element with rtl
    direction: rtl;
    font-size: calc(1vw + 1em);
    overflow: auto;
    overflow-y: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    
    // then restore ltr, + inline-block + nowrap
    ul {
        display: inline-block;
        direction: ltr;
        margin: 0;
        list-style: none;
        padding: 0;
        white-space: nowrap;
    }
    li { display: inline; margin: 0; }
    li:last-of-type { font-weight: bold; }
    a {
        display: inline-block;
        padding: 0.25em 1em;
        
        &:link,&:visited { text-decoration: none; }
        &:hover,&:focus,&:active { text-decoration: underline; }
        
        &:before {
            content: '➤';
            display: inline-block;
            margin-right: 0.5em;
        }
    }
}