Collapsed breadcrumbs

collapsed-breadcrumbs.markdown

Collapsed breadcrumbs

A list of breadcrumbs collapsed down to show only preview text for all but the current page, with full text shown on hover/focus.

A Pen by Skye on CodePen.

License.

index.html

<ul class="collapsed">
  <li><a href="#">Home</a></li><!--
  --><li><a href="#">First link</a></li><!--
  --><li><a href="#">Second link</a></li><!--
  --><li><a href="#">Another lengthier link</a></li><!--
  --><li><a href="#">Final link in the hierarchy</a></li><!--
  --><li>Current page</li>
</ul>

style.css

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 1em;
  background-color: rgb(227,227,227);
}


/* Regular breadcrumbs */

ul {
  list-style-type: none;
  margin: 0;
  padding: 2em;
  color: #333;
}

li {
  display: inline-block;
  position: relative;
  padding-right: 2em;
  margin: 0;
}
  li:after {
    content: '>';
    position: absolute;
    display: inline-block;
    right: 0;
    width: 2em;
    text-align: center;
  }
li:last-child {
  font-weight: bold;
}
  li:last-child:after {
    content: '';
  }

a {
  text-decoration: none;
  display: inline-block;
  color: #333;
  white-space: nowrap;
}
  a:hover {
    text-decoration: underline;
  }


/* Collapsed breadcrumbs */

.collapsed li {
  overflow: hidden;
}
  .collapsed li:after {
    background: rgb(227,227,227);
    background: linear-gradient(90deg, rgba(227,227,227,0.4) 0%, rgba(227,227,227,1) 35%);
    padding-left: 1em;
  }

.collapsed a {
  max-width: 2em;
  transition: max-width 300ms ease-in-out;
}
  .collapsed a:hover,
  .collapsed a:focus,
  .collapsed li:hover a {
    max-width: 1000px;
  }
  .collapsed li:hover:after {
    padding-left: 0em;
    background: transparent;
  }