Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Create an Expandable Sidebar Navigation Links

Do your navigational elements do too much? Offset potentially overwhelming menus by using an expansive sidebar for an added navigational element.

Navigation is a critical part of UX design, but sometimes, there are so many navigation options that's things like mega menus simply aren't functional. In those moments, it's often easier to break up the navigational elements as to not overwhelm a user.

Such moments can become quite apparent when using navigational links in your template's sidebar, aside, or other secondary template element. A unique way to streamline, but still include all necessary links, in your sidebar navigation is to make your primary, top-level links expandable/collapsible. With this method, users can clearly get to the links and sections they need, and yet you preserve your design and prevent long lists from displaying by default.

With this tutorial, you will get all of the needed HTML, CSS, and JS to create these expandable/collapsible navigational elements.

HTML

The HTML here uses un-ordered, un-styled list within another to specify where to put the sub-items.

<aside class="col-xs-12 col-md-12 col-lg-3 side-menu">
<nav class="left-nav hidden-xs hidden-sm hidden-md">
  <ul class="nolist">
    <li class="nolistHighlight image-container">
      <img src="https://www.solodev.com/_/images/solodev-logo-white.png"/>
    </li>
    <li>
      <a href="#">Product</a>
      <ul class="nolist">
        <li>
          <a href="#">Websites</a>
        </li>
        <li>
          <a href="#">Hosting</a>
        </li>
        <li>
          <a href="#">Engagement</a>
        </li>
        <li>
          <a href="#">Support</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Pricing </a>
      <ul class="nolist">
        <li>
          <a href="#">Websites</a>
        </li>
        <li>
          <a href="#">Hosting</a>
        </li>
        <li>
          <a href="#">Engagement</a>
        </li>
        <li>
          <a href="#">Support</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#/">Resources</a>
      <ul class="nolist">
        <li>
          <a href="#">Websites</a>
        </li>
        <li>
          <a href="#">Hosting</a>
        </li>
        <li>
          <a href="#">Engagement</a>
        </li>
        <li>
          <a href="#">Support</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Customers</a>
      <ul class="nolist">
        <li>
          <a href="#">Websites</a>
        </li>
        <li>
          <a href="#">Hosting</a>
        </li>
        <li>
          <a href="#">Engagement</a>
        </li>
        <li>
          <a href="#">Support</a>
        </li>
      </ul>      
    </li>
    <li>
      <a href="#">Blog</a>
      <ul class="nolist">
        <li>
          <a href="#">Websites</a>
        </li>
        <li>
          <a href="#">Hosting</a>
        </li>
        <li>
          <a href="#">Engagement</a>
        </li>
        <li>
          <a href="#">Support</a>
        </li>
      </ul>      
    </li>
  </ul>
</nav>
</aside>

CSS

Some general styles for the navigation.

a {
  text-decoration: none !important;
  font-family: Helvetica; 
}
aside nav.left-nav {
    background-color: #f5f5f5
}
aside nav.left-nav ul {
    margin-left: 0;
    padding-left: 0
}
aside nav.left-nav ul li {
    border-bottom: 2px solid #fff;
    font-size: 1.75rem
}
.image-container {
  background: #000 !important;
  text-align: center;
  padding: 1rem 0;
}
aside nav.left-nav ul li.nolistHighlight {
    background-color: #17629e;
    color: #fff;
    text-decoration: none
}
aside nav.left-nav ul li.nolistHighlight a {
    color: #fff
}
aside nav.left-nav ul li a {
    color: #010100;
    font-weight: 400;
    display: block;
    padding: 1.6rem;
    padding-left: 1.5rem;
    font-size: 1.25rem;
}
aside nav.left-nav ul li a:hover {
    color: #fff;
    background-color: #17629e;
    text-decoration: none
}
aside nav.left-nav ul li ul {
    display: none;
    background-color: #d7d7d7
}
aside nav.left-nav ul li ul li a {
    font-size: 1.25rem;
    font-weight: 300;
    padding-left: 2.5rem
}
aside nav.left-nav ul li ul li a.active {
    background-color: initial;
    color: #17629e;
    padding-bottom: initial
}
aside nav.left-nav ul li ul li a:hover {
    color: #fff;
    background-color: #17629e
}

JS

The Javascript/jQuery code here uses DOM traversing and matchHeight to give the elements the desired functionality when we want them.

$('.side-menu li').on('click', 'a', function(e){ if ($(this).parent().children('ul').length){ e.preventDefault(); $(this).addClass('active'); $(this).parent().children('ul').slideDown(); setTimeout(function(){ $.fn.matchHeight._update(); $.fn.matchHeight._maintainScroll = true; }, 1000); } }); $('.side-menu li').on('click', 'a.active', function(e){ e.preventDefault(); $(this).removeClass('active'); $(this).parent().children('ul').slideUp(); setTimeout(function(){ $.fn.matchHeight._update(); $.fn.matchHeight._maintainScroll = true; }, 1000); });

Want to see how this tutorial could look on your site before you invest the time in coding? Try it out first in the JSFiddle below! Make sure to click on each element to see how the expand/collapse functionality looks.

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev