How to Create a Dashboard Sidebar Menu with HTML, CSS, and JavaScript

Published on June 21, 2024

Hello everyone, and welcome back to our YouTube tutorial series! Today, we have an exciting project lined up for you. We’ll be creating a simple yet stylish dashboard sidebar menu using HTML, CSS, and JavaScript.

Let’s start by breaking down the HTML code that forms the foundation of our dashboard sidebar menu.

At the top, we have the standard HTML document structure with the necessary meta tags defining character set, viewport settings, and compatibility.

These meta tags ensure our web page is displayed correctly across various devices and browsers.

Now, let’s focus on the navigation section. We begin with a ‘nav’ element containing a class of ‘sidebar’, indicating that it’s our sidebar menu. Inside, we have a ‘header’ containing our logo and a toggle button.

The logo consists of an image and text. Here, we’ve used an image tag and a text div to display our logo and profession.

Next to the logo, we have a toggle button represented by an arrow icon. This button will be used to expand or collapse our sidebar menu.

Moving on, we have the menu links section. This is where we list various options available in our sidebar menu.

Each menu link is represented by a list item containing an anchor tag with an icon and text.

We’ve used Boxicons for the icons, which are added via CSS classes.

Finally, at the bottom, we have additional options like logout and a toggle switch for dark mode.

These elements are placed outside the main menu but still within the sidebar.

CSS

We begin with some global styling to ensure consistency across our project.

Here, we’re resetting margins, padding, and setting the box-sizing property to border-box. We’ve also defined a fallback font family of Arial, Helvetica, sans-serif.

Next, we have CSS variables declared within the :root selector. These variables will help us manage colours and transitions throughout our stylesheet.

They provide flexibility and ease of customization for our design.

Moving on to the body styles, we’ve set a minimum height of 100 viewport height units (vh) to ensure our content fills the screen.

We’ve also implemented a transition effect to smoothly animate changes, such as toggling between light and dark modes.

Now, let’s focus on styling our sidebar. It’s fixed to the left side of the screen with a width of 250 pixels by default.

We’ve added padding, background colour, and transition effects for a polished look.

Each list item within the sidebar has a height of 50 pixels and is vertically aligned.

We’ve defined styles for icons, text, and hover effects to enhance user interaction.

Within the menu bar, we’ve set the height and enabled vertical scrolling for overflow content.

This ensures that our sidebar remains accessible even if the content exceeds the viewport height.

At the bottom, we’ve added options for toggling between light and dark modes.

Users can also log out using the provided button.

JAVASCRIPT

Alright, folks! Now that we’ve crafted the visual elements of our dashboard sidebar menu, it’s time to add some functionality with JavaScript.

Let’s dive into the JavaScript code and see how we can make our sidebar menu dynamic and interactive.

First off, we’re selecting various elements from our HTML document using the document.querySelector method.

We grab hold of the body element, the sidebar navigation, the toggle button, the search button, the mode switch, and the mode text.

Next, we set up an event listener for the toggle button. When clicked, it toggles a ‘closeclass on the sidebar.

This class controls whether the sidebar is expanded or collapsed, giving users control over their viewing experience.

Moving on, we have an event listener for the search button. When clicked, it removes the ‘close’ class from the sidebar.

This ensures that the sidebar remains open when users interact with the search functionality.

Last but not least, we have an event listener for the mode switch. When clicked, it toggles a ‘darkclass on the body element.

This class changes the theme of our dashboard between light and dark modes, enhancing user experience based on their preference.

And there you have it! With just a few lines of JavaScript, we’ve added functionality to our dashboard sidebar menu, making it both visually appealing and user-friendly.

Our Latest Blog

Get Expert Help Anytime with HyperLearn from LSET

Get Expert Help Anytime with HyperLearn from LSET

Learning to code or solving technical challenges doesn’t have to be a lonely and frustrating...
Read More
Transform Your Coding Journey with HyperLearn by LSET

Transform Your Coding Journey with HyperLearn by LSET

In today’s fast-paced tech landscape, staying ahead in coding and software development is essential for...
Read More
How Can Role-Specific Interview Prep Help You Land Your Dream Job

How Can Role-Specific Interview Prep Help You Land Your Dream Job?

Landing your dream job often feels like a monumental task, especially when the competition is...
Read More