JSFiddle - React, Tailwind, and code Playground

by Troy Alford

HTML

<script src="@fontsource/ibm-plex-sans"></script>
<div id="app">
  <div class="breadcrumbs component">
    <div class="breadcrumb component"><a href="#">Home</a></div>
    <div class="wrappable">
      <div class="breadcrumb component"><a href="#">Grandparent Folder</a></div>
      <div class="breadcrumb component"><a href="#">Parent Folder</a></div>
      <div class="breadcrumb component"><a href="#">Child Folder</a></div>
    </div>
    <div class="breadcrumb component"><a href="#">This Page</a></div>
  </div>
</div>

SCSS

:root {
  font-family: 'IBM Plex Sans', sans-serif;
  a { color: #333; }
}

#app {
  border: 1px solid #666;
  margin: auto;
  width: 500px;
}

$toolbar-height: 2em;

.breadcrumbs.component {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  height: $toolbar-height;
  justify-content: flex-start;
  line-height: 1em;
  overflow: hidden;
  white-space: nowrap;

  > .wrappable {
    align-items: center;
    flex: max-content 1 1;
    flex-wrap: wrap;
    display: inline-flex;
    justify-content: flex-start;
    height: $toolbar-height;
    overflow: hidden;
    white-space: normal;
  }
  
  .breadcrumb.component {
    overflow: hidden;
    text-overflow: ellipses;
    white-space: nowrap;

    &:after {
      content: '»';
      padding-left: 0.5em;
    }
  }
  > .breadcrumb.component:last-child {
    &:after { content: ''; }
  }
}

.breadcrumb.component {
  align-items: center;
  display: inline-flex;
  height: $toolbar-height;
  justify-content: flex-start;
  line-height: 1em;
  max-height: $toolbar-height;
  min-width: max-content;
  overflow: hidden;
  padding: 0 0.25em;
  white-space: nowrap;
}