Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Collapsed breadcrumbs

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.

<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>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.