Take a look at this amazing codepen for some inspiration!
https://codepen.io/ArleyM/pen/pooWyy
HTML
<h1>Responsive breadcrumbs 2014</h1>
<div class="header">Header</div>
<div id="section-title" class="section-title">Expertise</div>
<ol id="sitemap" class="breadcrumb nav">
<li><a href="#?">Home</a></li>
<li><a href="#?">About</a></li>
<li class="active"><a href="#?">Expertise</a>
<!-- getting into a breadcrumb trail -->
<ol>
<li class="active"><a href="#?">Capital Markets</a>
<ol>
<li><a href="#?">By the Numbers</a></li>
<!-- no link on current page -->
<li class="current">Structured Products</li>
<li><a href="#?">History</a></li>
</ol>
</li>
<li><a href="#?">Investments</a></li>
</ol>
</li><!-- .active -->
<li><a href="#?">Our Work</a></li>
<li><a href="#?">Contact</a></li>
</ol><!-- .breadcrumb -->
<h1>Expertise</h1>
<p>Page content! This is an example of a responsive breadcrumb navigation that can also behave as a neat sitemap tool. UX idea by <a href="https://codepen.io/Zinderfine/">@Zinderfine</a>, blogged about <a href="https://arleym.com/codepen-responsive-breadcrumbs/" target="_blank">Here</a></p></p>
<p>This was made in 2014! Updated without floats or jQuery version at <a href="https://codepen.io/ArleyM/pen/RwrKbpM">this link</a>
CSS
@charset "UTF-8";
body {
padding: 2em;
}
.header {
background: #eee;
margin-bottom: 1em;
padding: 1em 0;
font-size: 3em;
color: #bbb;
text-align: center;
margin-bottom: 0;
}
ul, ol {
padding: 0;
}
.nav {
list-style: none;
margin-left: 0;
}
.nav > li,
.nav > li > a {
display: inline-block;
*display: inline;
zoom: 1;
}
.breadcrumb ol, .breadcrumb li, .breadcrumb a {
display: block;
float: left;
}
.breadcrumb:after {
content: "";
display: block;
clear: both;
}
.breadcrumb li {
display: inline-block;
}
.breadcrumb a,
.breadcrumb .current {
padding: .5em;
}
.breadcrumb a {
text-decoration: none;
}
.section-title {
display: none;
}
.breadcrumb a:after {
content: " »";
}
.breadcrumb > li {
display: none;
}
.breadcrumb > li:first-child, .breadcrumb > li.active, .breadcrumb > li.current {
display: inline-block;
}
.breadcrumb > li li {
display: none;
}
.breadcrumb > li li.active, .breadcrumb > li li.current {
display: inline-block;
}
@media (min-width: 48em) {
.breadcrumb {
display: block !important;
}
}
@media (max-width: 47.938em) {
.section-title {
display: block;
padding: 1em;
background: #eee;
cursor: pointer;
margin-top: 1em;
}
.section-title:hover {
background: #e4e4e4;
}
.section-title:before {
content: "▾ ";
}
.section-title.open:before {
content: "▴ ";
}
.breadcrumb {
padding: 1em;
margin: 0;
background: #fcfcfc;
border: 1px solid #eee;
border-top: 0;
display: none;
}
.breadcrumb ol, .breadcrumb li, .breadcrumb a {
float: none;
}
.breadcrumb li {
display: block;
float: none;
}
.breadcrumb a:after {
content: "";
}
.breadcrumb > li:first-child, .breadcrumb > li.active, .breadcrumb > li.current {
display: block;
}
.breadcrumb > li li {
padding-left: 1em;
}
}
JS
$('#section-title').on( "click", function() {
$('#sitemap').slideToggle();
$(this).toggleClass('open');
});