How to Create a Resizable Left Navigation

  Sidebar


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.

How to Create a Resizable Left Navigation

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:

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.

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.

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:

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:

Author

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

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.