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

How to Create a Resizable Left Navigation

Your sidebar or left navigation may have content that needs to expand past the default width. One way to account for this is to make the left navigation resizable, allowing users to expand and collapse it by dragging.

If you have a webpage such as a dashboard page where there is a full-height sidebar with a long list of navigation links or you would like to implement a page composed of different sections such as JSFiddle, giving your users the ability to re-size the sections and components will be very helpful because it will make it much easier to narrow down one window and making the other larger to focus on the information on that specific section. In this tutorial, we'll show you how to re-size a section such as a sidebar with HTML, CSS and Javascript.

Getting Started

In this tutorial, we're using Bootstrap. Copy and paste the external links below in the head section of your project's HTML file:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

HTML

The HTML code below includes two main parts: the sidebar and a main section. The sidebar is inside an aside tag with an id of #resizable. This is important to keep in mind because we will be selecting this id name in the Javascript code to make it resizable. Included in the sidebar section, there is a drag bar with the classname of .draghandle. When we add the Javascript code, we will be able to drag it and change the width of both the sidebar and the main section.

 <body>

   <div class="wrapper">
     <aside id="resizable" class="sidebar-left movable-div position-fixed bottom-0 left-0 animated">
       <div class="sidebar-logo position-relative pt-3">
         <a href="#" class="logo">
           <img src="https://github.com/solodev/resizable-left-navigation/blob/master/images/logo.png?raw=true" alt="Logo" class="img-fluid p-4">
         </a>
       </div>
       <hr />
       <div class="nano has-scrollbar">
         <nav class="nano-content" tabindex="0" style="right: -17px;">
           <ul class="nav nav-main">
             <li id="dashboard-nav" class="p-0 w-100">
               <div class="sidebar-sticky">
                 <h5 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                   <span>Locations</span>
                 </h5>
                 <ul class="flex-column">
                   <li class="nav-item">
                     <a class="nav-link" href="#">
                       <i class="fa fa-file-text-o" aria-hidden="true"></i>
                       XP-1
                     </a>
                   </li>
                   <li class="nav-item">
                     <a class="nav-link" href="#">
                       <i class="fa fa-file-text-o" aria-hidden="true"></i>
                       HAB-1
                     </a>
                   </li>
                   <li class="nav-item">
                     <a class="nav-link" href="#">
                       <i class="fa fa-file-text-o" aria-hidden="true"></i>
                       Orbiter-1
                     </a>
                   </li>

                 </ul>

                 <h5 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                   <span>Products</span>
                 </h5>
                 <ul class="flex-column">
                   <li class="nav-item">
                     <a class="nav-link" href="#">
                       <i class="fa fa-file-text-o" aria-hidden="true"></i>
                       VALKYRIE-1
                     </a>
                   </li>
                   <li class="nav-item">
                     <a class="nav-link" href="#">
                       <i class="fa fa-file-text-o" aria-hidden="true"></i>
                       TALON-2
                     </a>
                   </li>
                   <li class="nav-item">
                     <a class="nav-link" href="#">
                       <i class="fa fa-file-text-o" aria-hidden="true"></i>
                       LUNAR XPLORER
                     </a>
                   </li>
                 </ul>
               </div>
             </li>
           </ul>
         </nav>
         <div class="nano-pane" style="display: none;">
           <div class="nano-slider" style="height: 1246px; transform: translate(0px, 0px);"></div>
         </div>
       </div>
       <div class="draghandle" style="width: 6px; height: 100vh;"></div>
     </aside>
     <div id="mainArea" class="content marginLeft d-flex h-100 flex-column">
       <article class="col-lg-8 content-page--text">
         <div class="row">
           <div class="col-12 col-centered">
             <h1 class="text-center p-5">The Cosmos Awaits</h1>
             <p class="mb-4">Rogue cosmos muse about Rig Veda concept of the number one hydrogen atoms.
               Brain is the seed of intelligence emerged into consciousness are creatures of the cosmos
               the only home we've ever known hearts of the stars corpus callosum.
               Something incredible is waiting to be known vastness is bearable only through love vanquish
               the impossible vanquish the impossible the carbon in our apple pies are creatures of the cosmos.</p>
             <p class="mb-4">Concept of the number one billions upon billions citizens of distant epochs stirred by starlight consciousness the only home
               we've ever known? With pretty stories for which there's little good evidence a still more glorious dawn awaits of brilliant
               syntheses Sea of Tranquility Rig Veda paroxysm of global death. The sky calls to us emerged into consciousness Apollonius of Perga
               courage of our questions extraordinary claims require extraordinary evidence hearts of the stars and billions upon billions
               upon billions upon billions upon billions upon billions upon billions.</p>
           </div>
         </div>
       </article>
     </div>
   </div>
 </body>

CSS

In the CSS code below, we set the sidebar height to a full-height by making its height value 100vh. This sets the sidebar to the full height of the viewport. The vh unit uses percentages, so 100vh is 100% of the viewport. Then we give a default width for the sidebar by setting its width to 200px. Feel free to change the width value to customize it for your project. For the drag handle, we set a z-index of 100 to make sure that it is on top of all the other elements on the page. If there are any other elements with a higher z-index, we can't select the drag handle. The drag handle's width value is set to 8px. This width is enough for mouse to select and drag it. You can make it wider by increasing its width. Finally, we use the cursor: col-resize property and value. The col-resize property indicates that the column can be resized horizontally.

aside.sidebar-left#resizable {
  height: 100vh;
  min-width: 200px;
}

@media (min-width: 768px) {
  .wrapper .sidebar-left {
    top: 0;
  }
}

@media (min-width: 1200px) {
  aside.sidebar-left {
    width: 200px;
  }
}

aside.sidebar-left {
  width: 175px;
  top: 0;
  float: left;
  box-shadow: -5px 0 0 #f7f7f7 inset;
  z-index: 1000;
}

aside.sidebar-left .draghandle {
  position: absolute;
  z-index: 100;
  width: 8px;
  top: 0;
  bottom: 0;
  right: 0;
  cursor: col-resize;
  float: right;
}

aside.sidebar-left .sidebar-logo img {
  max-width: 200px;
  padding-right: 5px;
  vertical-align: middle;
  border-style: none;
}

.wrapper {
  min-height: 100vh;
  width: 100%;
  height: 100%;
  table-layout: fixed;
  overflow: hidden;
  padding-top: 0;
}

.wrapper #mainArea.content {
  margin-left: 25%;
}

@media (min-width: 992px) {
  .wrapper #mainArea.content {
    margin-left: 250px;
  }
}

.mt-wrapper {
  position: relative;
  z-index: 1;
}

ul {
  list-style-type: none;
}

.nav {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;

}

.nav a {
  font-weight: 500;
  color: #939089;
}

.nav h5 {
  margin-right: 4px;
  color: #999;
  font-size: 1rem;
  text-transform: uppercase;
}

h1 {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color: #f1f1f1;
}

body {
  background: #14161D;
  color: #939089;
}

hr {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
  aside.sidebar-left {
    display: none;
  }
}

Javascript

Right now, the content on the page is static. The Javascript code below will make your sidebar draggable. Copy and paste it in your HTML file inside script tags or create a separate js file such as draggable.js and put the code in that file:


$(document).ready(function() {
        var element = document.getElementById('resizable');
        if (element) {
          var resizer = document.createElement('div');
          resizer.className = 'draghandle';
          resizer.style.width = '6px';
          resizer.style.height = '100vh';
          element.appendChild(resizer);
          resizer.addEventListener('mousedown', initResize, false);
        }

        function initResize(e) {
          window.addEventListener('mousemove', Resize, false);
          window.addEventListener('mouseup', stopResize, false);
          $('#mainArea.content, #tabs iframe').addClass('marginLeft');
        }

        function Resize(e) {
          element.style.width = (e.clientX - element.offsetLeft) + 'px';
          $('#mainArea.content').css('margin-left', (e.clientX - element.offsetLeft) + 'px');
          $('#tabs iframe').css('margin-left', (element.offsetLeft + 40) + 'px');
        }

        function stopResize(e) {
          window.removeEventListener('mousemove', Resize, false);
          window.removeEventListener('mouseup', stopResize, false);
          $('#tabs iframe').css('margin-left', element.offsetLeft + 'px');
        }
      });

And there is it. In the JSFiddle below, drag the gray panel to see how both the sidebar and the main area gets re-sized:

Download from Github

Share on Facebook Tweet It

Paris Tuzun
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