Responsive Sidebar/Navbar

How the sidebar is made?

This sidebar is made using HTML and CSS without any 3rd pary UI frameworks like bootstrap, material, etc., The key concept of the sidebar is the simple flexbox layout. It is easily understandable and customizable. I have used :root element to declare the CSS value which makes the sidebar easily customizable. Just go ahead and play around with those values to get the awesome customized designs. You can implement dark mode using some javascript snippets. I have added some styles for this content. Please remove that and start developing.

Here is the :root values of the css.

root values

Customize the above values based on your requirements.

How to use the sidebar?

Press Ctrl + U in the browser or right-click and select View Source to view the source code.

or, click here to open the repository

Compatibility

Any browsers that supports HTML5.

Platform previews

Responsive sidebar in mobile

Mobile Phone

Responsive sidebar in tablet

Tablet

Responsive sidebar in pc

PC