Create navigation with popmenu if its to long

Check out this codepen for 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');
});