30 CSS Sidebar Menu Examples

An agglomeration of the top free CSS sidebar menu code examples. These carefully selected CSS sidebar navigation menus are practical and utilize good color schemes ideal for web design. Moreover, many are responsive sidebars making them great for both desktop and mobile applications.

css sidebar menu featured

Hover to play
Title:

Sidebar nav animation

Author:

Magnificode

Created on:

June 08, 2015

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

SASS

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A Stylish, beautiful sidebar menu pop out with excellent transition effects on hover over the menu. It is created using HTML and SCSS. The menu items are highlighted with black bar and gives a smooth transition effect.

Hover to play
Title:

Sidebar menu on hover

Author:

Jfarrow

Created on:

May 24, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic collapsible sidebar menu with icons that has a smooth transition effects on hover. It is created using pure HTML and CSS. On hover over the menu, it expands the menu. When you hover over the menu item, it is highlighted with the light blue bar.

Hover to play
Title:

Triangular sidebar menu

Author:

Nikolay Talanov

Created on:

December 06, 2015

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Sass, jQuery

Compatable browsers:

Webkit only

Code description:

n awesome triangular sidebar menu with amazing animation effects created using HTML, SCSS, and JQuery. On click, it fades out the main page with animation and shows all triangular with nice animation effects.

Hover to play
Title:

Multiple sidebar menu options

Author:

Virgil Pana

Created on:

March 22, 2015

Made with:

HTML, CSS, jQuery

Responsive:

No

Dependencies:

jQuery

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A sidebar menu with smooth transition effects on click created using HTML, CSS, and jQuery. When you click on the hamburger button it will expand the sidebar menu with smooth transitions.

Hover to play
Title:

Nexus like Menu

Author:

illnino

Created on:

August 09, 2013

Made with:

HTML, SCSS, jQuery

Responsive:

nan

Dependencies:

jQuery, Sass

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic collapsible, nexus-like sidebar menu created using HTML, SCSS, and jQuery. When you hover over the menu bar, sidebar appears. Further, on hover over the sidebar icons, it expands the menu and highlights with the gray color on hover.

Hover to play
Title:

Sidebar Pastel

Author:

Yuhomyan

Created on:

August 18, 2020

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A decorous, collapsible, responsive sidebar menu created using pure HTML and CSS. On click, it opens a menu with a smooth transition and on hovering of menu items, it shows gradient background.

Hover to play
Title:

Sidebar menu concept

Author:

J Scott Smith

Created on:

May 06, 2015

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A beautiful sidebar menu with 3D transition on menu content. It is created using HTML, SCSS and Javascript. When you click on the button, it will have 3D on the main page. The menu item is highlighted with white bar when you hover over them.

Hover to play
Title:

Pro sidebar template

Author:

Mohamed Azouaoui

Created on:

December 29, 2021

Made with:

HTML, SCSS, JS(Babel)

Responsive:

Yes

Dependencies:

JS(Babel)

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A fully responsive, collapsible, multi level side menu bar created using HTML, CSS, and vanilla Javascript. It has smooth slide animation for the menu bar. When you hover over the icon and expand it with a click, it gives a rich look to the webpage. It has a delightful animation when you hover over the icons.

Hover to play
Title:

CSS Sidebar toggle

Author:

Silvestar Bistrovic

Created on:

January 14, 2020

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A beautiful, collapsible sidebar created using HTML, SCSS and JS(Babel). When you click on the menu bar, it expands covering the whole page with the different menu items listed on it and a close button to collapse the menu. When you hover over the menu items, it changes the text color to yellow.

Hover to play
Title:

Bootstrap sidebar menu

Author:

Hugh Balboa

Created on:

December 17, 2018

Made with:

HTML, CSS, jQuery

Responsive:

Yes

Dependencies:

jQuery

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic, sophisticated bootstrap sidebar menu with smooth transition effects created using HTML, CSS, and jQuery. It highlights the menu items when you you hover over them. It has used font awesome icons to show icons which gives a descent look to the web page.

Hover to play
Title:

Desktop system with animated sidebar

Author:

Venerons

Created on:

April 11, 2014

Made with:

HTML(Pug), SCSS, JS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An alluring animated sidebar menu with gradient desktop created using HTML(Pug), SCSS, and Javascript. When you hover over the sidebar, it will expand the menu first and highlight each item on the menu as you hover over them.

Hover to play
Title:

Rotating 3D navigation

Author:

Arjan Jassal

Created on:

October 28, 2014

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An amazing, vertical navigation bar that switches from an icon to text with a cool animation. It is created using HTML5 and CSS3. When you hover over the icons, it will change its face with smooth animation to show text giving a 3D look to the menu.

Hover to play
Title:

Responsive side nav menu

Author:

Abdelfattah Baraka

Created on:

July 04, 2017

Made with:

HTML, CSS, jQuery

Responsive:

Yes

Dependencies:

jQuery

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A beautiful, responsive sidebar menu with cool animations created using HTML, CSS, and jQuery. When you click on the menu items, it highlights the menu item with the purple color. It also remembers the state of menu item. On medium screens, it will shrink the menu and expand it on hover.

Hover to play
Title:

Modern sidebar menu

Author:

Florin Cornea

Created on:

January 25, 2022

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A modern and stylish sidebar menu with rounded corner in classic blue background created using pure HTML and CSS. On hover, it will change the background color to white to show the selection giving a very dignified look to the web page.

Hover to play
Title:

Collapsible sidebar menu

Author:

Eduardo Moreno

Created on:

September 08, 2018

Made with:

HTML, CSS, Javascript

Responsive:

No

Dependencies:

Domatastuc.js, Hammer.js

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An amazing sidebar menu for the medium screen with the sliding effect created using HTML, CSS, and Javascript. On click, it will expand the menu and push the main page right.

Hover to play
Title:

Dashboard sidebar

Author:

Ollie Moran

Created on:

February 16, 2022

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic, sophisticated sidebar with the menu icons created using HTML and CSS. When you hover over the icon on the menu, it highlights the menu with a beautiful purple color to give a decent look. This menu bar can be expanded and collapsed using the arrow on the top of menu. It also has a button to switch between dark mode and light mode in the web page.

Hover to play
Title:

Material jelly sidebar menu

Author:

Hrtzt

Created on:

May 26, 2016

Made with:

HTML, CSS, jQuery

Responsive:

No

Dependencies:

jQuery

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A delightful, jelly sidebar menu created using HTML, CSS, and jQuery. When you click on the button at right, it will show an amazing pop out menu on the left hand side of a web page. It has no hover effect for menu items but you can customize it for this.

Hover to play
Title:

Vue sidebar menu

Author:

Muthu Kumar

Created on:

June 21, 2019

Made with:

HTML, CSS, Vue.js 2.6.10

Responsive:

No

Dependencies:

Vue.js 2.6.10

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A sidebar menu with sliding effects created using HTML, CSS, and Vue.js. It can expand or shrink with a bottom toggle button with a smooth slide effect. It also has a hover effect for each item.

Hover to play
Title:

Responsive sidebar menu

Author:

Webkit coding

Created on:

February 17, 2022

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic, sophisticated sidebar with the menu icons created using HTML and CSS. When you hover over the icon on the menu, it highlights the menu with a beautiful blue color to give a decent look. This menu bar can be expanded and collapsed using the arrow on the top of menu.

Hover to play
Title:

Bootstrap side menu

Author:

Jagadesha NH

Created on:

December 17, 2016

Made with:

HTML, CSS, jQuery, Bootstrap 3.3.7

Responsive:

nan

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A simple and elegant minimalist sidebar menu that utilizes bootstrap. On open, it smoothly slides out just as smoothly as it slides out on close and features a slight hover effect on menu items. It brightens the text when you hover over the menu items in the sidebar.

Hover to play
Title:

Bootstrap sidebar nav menu

Author:

Serhii

Created on:

June 20, 2018

Made with:

HTML, CSS, jQuery, Bootstrap 4.1.1

Responsive:

Yes

Dependencies:

jQuery, Bootstrap 4.1.1

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An amazing, classic and responsive sidebar menu created using HTML, CSS, and Bootstrap 4. On click, it will show a menu with slide effects and also has a hover effect for each item in the menu.

Hover to play
Title:

Slide menu

Author:

Diego Eis

Created on:

September 30, 2013

Made with:

HTML, CSS, jQuery, Bootstrap 4.1.1

Responsive:

Yes

Dependencies:

jQuery

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A sophisticated, alluring side menu with the slide effect was created using HTML, CSS, and jQuery. On click, It will push the main content right and expand the menu with smooth sliding and also has hover effects on menu items.

Hover to play
Title:

Hover sidemenu

Author:

Lenny Peters

Created on:

August 09, 2017

Made with:

HTML, CSS(Less)

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A beautiful sidebar menu with 3D transition on menu content. It is created using HTML and, CSS(Less). When you click on the button, it will have 3D on the main page. The menu item is highlighted with bar when you hover over them.

Hover to play
Title:

Twitter sidebar

Author:

Assia Chemlali

Created on:

July 25, 2019

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic twitter sidebar menu created using HTML and SCSS. If you hover on an item it will highlight the item with the blue background. You can make this smooth with the “transition-duration” property in CSS.

Hover to play
Title:

Static bootstrap sidebar

Author:

Prince Sargbah

Created on:

April 06, 2018

Made with:

HTML, CSS, jQuery, Bootstrap 4.0.0

Responsive:

No

Dependencies:

jQuery, Bootstrap 4.0.0, jQuery.nicescroll

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A delightful, stylish, Static sidebar menu created using HTML, CSS, and Bootstrap 4. It has a hover effect on each item for text color. You can change the background property also on hover.

Hover to play
Title:

Classic sidebar

Author:

Sheshelai

Created on:

February 15, 2022

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A simple, classic side menu bar created using pure HTML and CSS. When you hover over the menu icons, it brightens its color and displays the sub menu as a flapping menu.

Hover to play
Title:

Dropdown sidebar

Author:

Josh

Created on:

February 11, 2022

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A sophisticated, alluring side menu in black created with the slide effect on the sub menu items is created using HTML and CSS. When you hover over the side menu icons, menu items appears on the side in a block. When you hover over the menu items it gives a beautiful effect.

Hover to play
Title:

Accordion Menu

Author:

Benjamin

Created on:

April 18, 2014

Made with:

HTML, CSS, jQuery

Responsive:

No

Dependencies:

jQuery

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A static side menu bar created with the gray background using HTML, CSS and jQuery. When you hover over the menu items, it changes to pleasant sea green color. When you click on the menu item, it displays the submenus with the sliding effect and pushing the other menu items downside to give a very formal look.

Hover to play
Title:

Simple sidebar menu transition

Author:

Niel app

Created on:

February 16, 2022

Made with:

HTML, CSS, Javascript

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A simple, collapsible sidebar created on right side of the web page in blue color to give a decent look to the web page. It is created using HTML, CSS and Javascript. When you hover over the menu, menu items are highlighted with a decent white bar.

Hover to play
Title:

Side navigation push menu

Author:

Deividcode

Created on:

February 16, 2022

Made with:

HTML, CSS, Javascript

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An elegant, collapsible sidebar created with a black menu background using HTML, CSS and Javascript. When you hover over the menu item, it displays a smooth animation of white bar with the blue lines to give a decent look to the menu items.