Collection of hand-picked free HTML and CSS sidebar menu code examples. Update of November 2018 collection. 1 new item.

Related Articles

  1. CSS Menus
  2. Bootstrap Sidebars

Author

  • Comehope

Made with

  • HTML / CSS

About the code

Menu Effect

Reverse text color menu effects.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Only Navigation for Sidebar CSS Only Navigation for Sidebar - GIF Demo

Author

  • sean_codes

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: -

Demo image: CSS Sidebar Menu CSS Sidebar Menu - GIF Demo

Author

  • Milica

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

Demo image: Purple Sidebar Menu

Author

  • Shawn Reisner

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: -

Demo image: Pure CSS Fly in Sidebar Navigation Pure CSS Fly in Sidebar Navigation - GIF Demo

Author

  • Stephen Scaff

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

Demo image: Sidebar Navigation Animation

Author

  • magnificode

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: -

Demo image: Fixed Hover Navigation Fixed Hover Navigation - GIF Demo

Author

  • Vince Brown

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: -

Demo image: Fully Responsive CSS3 Sidebar Menu

Author

  • Claudio Holanda

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: -

Demo image: Sidebar Sliding Menu CSS Sidebar Sliding Menu CSS - GIF Demo

Author

  • Eduard L.

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

Demo image: 3D Rotating Sidebar Navigation 3D Rotating Sidebar Navigation - GIF Demo

Author

  • Arjan Jassal

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: -

Demo image: Pure CSS3 Sidebar Menu Pure CSS3 Sidebar Menu - GIF Demo

Author

  • Rizky Kurniawan Ritonga

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

Demo image: Sidebar Menu CSS Sidebar Menu CSS - GIF Demo

Author

  • JFarrow

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

Demo image: CSS Sidebar Menu CSS Sidebar Menu - GIF Demo

Author

  • Jon Ambas

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

Demo image: Fixed Navigation Hover Effect Fixed Navigation Hover Effect - GIF Demo

Author

  • Terence Devine

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: -