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.
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
Mobile Phone
Tablet
PC