JSFiddle - React, Tailwind, and code Playground

by Vladimir Kutepov

HTML

<div id="scrollable">
  <ul id="breadcrumb">
    <li>⌂</li>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Page 4</li>
    <li>Page 5</li>
    <li>Page 6</li>
    <li>Page 7</li>
    <li>Page 8</li>
    <li>Page 9</li>
    <li>Page 10</li>
    <li>Page 11</li>
    <li>Page 12</li>
    <li>Page 13</li>
    <li>Page 14</li>
    <li>Page 15</li>
    <li>Page 16</li>
    <li>+</li>
  </ul>
</div>

CSS

#scrollable {
  overflow-x: scroll;
  background: yellow;
  white-space: nowrap;
}

#breadcrumb {
  list-style: none;
  display: inline-flex;
  margin: 0;
  padding: 20px;
  background: orange;
}

li {
  background: darkgreen;
  color: white;
  border-radius: 10px;
  padding: 5px 10px;
  margin: 0 0 0 10px;
}

li:first-child {
  margin-left: 0;
}

JavaScript

const scrollable = document.getElementById('scrollable')

scrollable.scrollLeft = scrollable.scrollWidth