Skip to Content

Adding Side Navigation to your Website


Adding side navigation to your website allows you to deliver an improved user experience (UX) and make it easier for users to navigate your website on desktop and mobile devices.

Adding side navigation to your website allows you to deliver an improved user experience (UX) and makes it easier for users to traverse your website. Side navigation also allows you to add more content and functionality such as social share and search to your website navigation while maintaining a clean, modern design.

Below is the HTML, CSS, and JavaScript needed to add side navigation to your website. Enjoy.

Step 1 - Add the HTML below to the main navigation of your website

The above code creates the basic "Hamburger" icon which a user can click on to expand the side navigation menu.

Step 2 - Add the HTML below to under the closing footer tag of your website

The HTML above creates the structure of the menu once it is expanded. By default, this section is hidden on page load.

Step 3 - Add the JavaScript below to a file called side-nav.js

The needed JavaScript is fairly straightforward. A number of onclick events add or remove css classes depending on the circumstances of the click.

Step 4 - Add the CSS below to the main stylesheet of your website

The above CSS creates a fixed menu when it's expanded.

Step 5 - Add the following includes to the header of your website

With side navigation on your website, you improve the desktop and mobile experience for users with room for additional content and functionality. Adding side navigation to your website is easy with a bit of HTML and JavaScript and doesn't require any plugins. We highly advise adding side-navigation to your website to improve your website's mobile experience in the ever-increasingly mobile world.


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
Solodev Logo

©2024 Solodev. All rights reserved worldwide.