30+ Awesome CSS Sidebar Menus (Free Code + Downloads)
Enjoy this large collection of 100% free HTML and CSS sidebar menu code examples. These CSS sidebar menus will improve your website a lot.
1. Purple CSS Sidebar Menu
Author: Shawn Reisner (sreisner)
Links: Source Code / Demo
Created on: January 12, 2017
Made with: HTML, SCSS
2. Fixed Hover Navigation
Fixed side drawer navigation,That expands on hover.(Treehouse inspired)
Author: Vince Brown (vincebrown)
Links: Source Code / Demo
Created on: November 12, 2014
Made with: HTML, SCSS
Tags: navigation, svg, sidedrawer, animation, hover
3. Pure CSS3 Mega Dropdown Menu With Animation (Vertical)
Author: Rizky Kurniawan Ritonga (rizkykurniawanritonga)
Links: Source Code / Demo
Created on: April 2, 2014
Made with: HTML, CSS
Tags: menu
4. CSS Navbar & Sidebar
Author: Milica (Kamilica)
Links: Source Code / Demo
Created on: April 17, 2017
Made with: HTML, SCSS
5. CSS Only Mirror Like Nav Sidebar Menu
Author: sean_codes (sean_codes)
Links: Source Code / Demo
Created on: May 18, 2017
Made with: Pug, CSS, JS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
6. Sidebar Nav Animation
Nothing like a little trendy body pushin'.
Author: magnificode (magnificode)
Links: Source Code / Demo
Created on: June 8, 2015
Made with: HTML, SCSS
Tags: nav, push, svg
7. Pure CSS Fly In Sidebar Nav
A simple, multi-level sidebar nav. 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.
Author: Stephen Scaff (StephenScaff)
Links: Source Code / Demo
Created on: August 26, 2015
Made with: HTML, SCSS
Tags: nav, sidebar, transform, pure-css, navigation
8. Side Sliding Menu CSS
CSS Sliding menu with scroll, no JS were used
Author: Eduard L. (EduardL)
Links: Source Code / Demo
Created on: March 30, 2014
Made with: HTML, CSS
Tags: menu, slide, side, css
9. Fully Responsive CSS3 Menu
A fully responsive menu without any need of JavaScript and using less than 200 lines of functional CSS code.
Author: Claudio Holanda (kazzkiq)
Links: Source Code / Demo
Created on: March 18, 2015
Made with: HTML, Less, JS
Tags: menu, responsive, css3, mobile
10. Sidebar Menu Hover Show/Hide CSS
Sidebar Menu Hover Show/Hide with just CSS
Author: JFarrow (JFarrow)
Links: Source Code / Demo
Created on: February 11, 2014
Made with: HTML, CSS
Tags: showhide, css, sidebar, navigation
11. 3D Rotating Navigation
A vertical navigation bar that switches from an icon to text with a cool animation. HTML5 and CSS3.
Author: Arjan Jassal (arjancodes)
Links: Source Code / Demo
Created on: May 30, 2014
Made with: HTML, CSS
Tags: nav, animation, css3, icons, transform
12. Fixed Nav Hover Effect
Testing out a new design concept with a pseudo element hover effect using css-transitions.
Author: Terence Devine (tdevine33)
Links: Source Code / Demo
Created on: August 11, 2013
Made with: HTML, SCSS
Tags: hover, pseudo, nav, transition, css3
13. CSS Nav Sidebar
Author: Jon Ambas (jonambas)
Links: Source Code / Demo
Created on: January 2, 2014
Made with: HTML, SCSS
Tags: sass, navigation, sidebar
14. 金魚收合式側邊選單練習
Author: Eddie Chen (livehighvu06)
Links: Source Code / Demo
Created on: October 1, 2019
Made with: HTML, CSS
Tags: html, css, sidemenu
15. Minimal CSS Sidebar
Author: rijdzuan sampoerna (rijdz)
Links: Source Code / Demo
Made with: HTML, SCSS, JS
16. Responsive Side Nav Menu
Author: abdelfattah baraka (abdelfattahbaraka)
Links: Source Code / Demo
Created on: April 7, 2017
Made with: HTML, CSS, JS
17. Pure CSS Navbar - 2
A right aligned navbar made purely with CSS,HTML without any use of javascript
Author: Turret [http://turret.in] (teamturret)
Links: Source Code / Demo
Created on: January 14, 2014
Made with: HTML, CSS
Tags: css, navbar, sidebar, sidenav
18. Side Menu
Vertical side menu, pure CSS3 and HTML
Author: Modesto (LYkN)
Links: Source Code / Demo
Created on: January 21, 2020
Made with: HTML, SCSS
Tags: html, css, side-menu
19. Sidenav
Author: NishithaKS (nishithaks)
Links: Source Code / Demo
Created on: June 29, 2018
Made with: HTML, CSS
Tags: vertical-nav, sidenav, side-navigation, fixed sidebar, sidebar
20. Twitter Sidebar With Css & Html
Author: Assia Chemlali (AssiaChemlali)
Links: Source Code / Demo
Created on: July 22, 2019
Made with: HTML, SCSS
Tags: twitter, sidebar, html5, css3
21. Pure CSS Off Canvas Menu With Animated Links
Pure CSS Off Canvas Menu with animated links
Author: Amit Singh (amitasaurus)
Links: Source Code / Demo
Created on: January 6, 2016
Made with: HTML, CSS
Tags: sidenav, off-canvas, animation, navigation, css
22. Sidenav Neumorphism
Author: virm90 (virm90)
Links: Source Code / Demo
Created on: February 14, 2020
Made with: HTML, CSS
Tags: sidenav, menu navigation, css
23. Sidebar Menu
Side menu with custom transition
Author: Sabarinathan Masilamani (nathan5x)
Links: Source Code / Demo
Created on: October 12, 2016
Made with: HTML, SCSS
Tags: sidemenu, animation, css3, navigation, sidebar
24. Hover Side Menu
CSS only side menu thingy. Gonna add more to the picturefill buisness
Author: Lenny Peters (Loonz206)
Links: Source Code / Demo
Created on: June 10, 2015
Made with: HTML, Less, JS
Tags: hover, sidemenu, css, html, basic
25. Pure CSS Wobble Menu
Fully animated menu system using CSS transitions
Author: Izzy Skye (chrysokitty)
Links: Source Code / Demo
Created on: August 19, 2014
Made with: HTML, CSS
Tags: pure-css, sidemenu, navigation
More Awesome Lists:
Share: