How do I truncate the beginning of breadcrumbs in materializecss when they exceed the length of the screen to only leave the final breadcrumbs?

Question

To be more descriptive on my issue, when the depth of the tree in my inventory system exceeds the X size of the screen, the breadcrumbs are cut off. I am fine with this behavior, although I want this to be truncated to only leave the deepest parts of the tree viewable, not the least deep.

If I have 20 items, and the screen can only show 10, I want to show the last 10 instead of the first 10.

If I have these breadcrumbs: {hello > breadcrumbs > example > foobar > this > is > getting > full} and it cuts off at foobar, I want it to show as many as it can going from the right backwards, which might be:

{example > foobar > this > is > getting > full}

Thank you in advance.

Answer 1

One way to do it is using a mix of direction:rtl, overflow:hidden & whitespace:nowrap, and a bit of the materialize grid:

 <nav>
    <div class="nav-wrapper container row">
        <div class="breadcrumb-wrapper col s12 m6">
          <a href="#!" class="breadcrumb"><i class="material-icons">home</i></a>
          <a href="#!" class="breadcrumb">Second</a>
          <a href="#!" class="breadcrumb">Third</a>
          <a href="#!" class="breadcrumb">Fourth</a>
          <a href="#!" class="breadcrumb">Fifth</a>
          <a href="#!" class="breadcrumb">Sixth</a>
        </div>
    </div>
  </nav>

I've added in a .row to the nav-wrapper - this allows us to use the grid system. We need this to bring the breadcrumbs back to the left hand side of the page, because by setting direction:rtl, while we shift the content so that the right hand side is always visible, it is also right aligned.

The CSS:

.breadcrumb-wrapper {   
    white-space: nowrap;
    overflow: hidden;
    direction: rtl;
}

.breadcrumb:before {
    display: inline; 
}

This hides any breadcrumbs that spill outside of the col.

https://codepen.io/doughballs/pen/gOPGWWp