Collection of hand-picked free HTML and CSS sidebar menu code examples from codepen and other resources. Update of July 2018 collection. 3 new items.
Related Articles
Links
Made with
- HTML / CSS
About a code
App Admin Menus
App admin menus. light/dark modes.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: tailwind.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Menu Hover Slide Fill
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Single Page Application
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Made with
- HTML / CSS
About the code
Menu Effect
Reverse text color menu effects.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS
About the code
CSS Only Navigation for Sidebar
CSS only mirror like navigation for sidebar.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
CSS Sidebar Menu
HTML and CSS navbar and sidebar mega menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: bootstrap.css, font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About the code
Purple Sidebar Menu
This is a reverse engineering of the "Hyperspace" design from HTML5 Up! https://html5up.net/hyperspace
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Pure CSS Fly in Sidebar Navigation
A simple, multi-level sidebar navigation. Features pure css "fly in" subnav, that leaves icons of parent nav visible. Nav items will scroll (overflow-y) if needed. Uses transforms and transitions.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: ionicons.css
Links
Made with
- HTML / CSS (SCSS)
About the code
Sidebar Navigation Animation
Nothing like a little trendy body pushin.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Fixed Hover Navigation
Fixed sidebar drawer navigation, that expands on hover.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (Less)
About the code
Fully Responsive CSS3 Sidebar Menu
A fully responsive sidebar menu without any need of JavaScript and using less than 200 lines of functional CSS code.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Sidebar Sliding Menu CSS
CSS sliding sidebar menu with scroll, no JS were used
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About the code
3D Rotating Sidebar Navigation
A vertical navigation bar that switches from an icon to text with a cool animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Pure CSS3 Sidebar Menu
Pure CSS3 mega dropdown sidebar menu with animation..
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About the code
Sidebar Menu CSS
CSS sidebar menu with hover show/hide.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About the code
CSS Sidebar Menu
Easy to use sidebar menu with HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About the code
Fixed Navigation Hover Effect
Fixes sidebar menu concept with a pseudo element hover effect using CSS transition.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -