16 CSS Sidebar Accordion Menu Examples

An agglomeration of the top free HTML and CSS sidebar accordion menu code examples.

css sidebar accordion menu

Title:

Sleek Admin Dashboard

Author:

Abdus Salam

Created on:

January 12, 2020

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An amazing, collapsable CSS accordion sidebar menu, created along with HTML. It contains a highlighted logo and header and is designed to have expandable and collapsable menu options that also contain icons and submenus, that can be customized to contain labels.

Title:

Multilevel Menu with Collapsing accordion using Active Class

Author:

Piyush

Created on:

July 17, 2021

Made with:

HTML, CSS, JavaScript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An elegant and sleek CSS accordion sidebar menu, created along with HTML and JavaScript. It is designed as a menu that provides options for multiple drop downs. It highlights the active menu item.

Title:

Foundation Test

Author:

Svend Richter

Created on:

February 23, 2018

Made with:

HTML, CSS, JavaScript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A sleek-looking sidebar accordion menu created using HTML, SCSS and JavaScript. The menu is created to display the username and profile picture of the user on top of the menu and contains icon support for both the menu items as well as the sub menu items. It also highlights the selected menu item.

Title:

Stisla Layout Skins

Author:

Muhammad Dicky Hidayat Latif

Created on:

December 14, 2019

Made with:

HTML, SCSS, JavaScript

Responsive:

SCSS

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A minimal and sleek sidebar accordion menu that is fully collapsable and created with HTML, CSS and JavaScript. It is designed to consist a header and has icons and titles for menu items. Also contains a button at the bottom of the menu.

Title:

Admin Panel

Author:

Ajeeb

Created on:

July 17, 2017

Made with:

HTML, CSS, JavaScript

Responsive:

No

Dependencies:

JavaScript

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An uniquely designed CSS accordion sidebar menu that is collapsable ans is created along with HTML and JavaScript. The menu items are designed as icons with small labels. Upon click, it pops up a box on the side with the sub-menu items.

Title:

Accordion Menu

Author:

Benjamin

Created on:

April 19, 2014

Made with:

HTML, CSS(LESS), JavaScript

Responsive:

No

Dependencies:

Less

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A minimal yet pretty CSS accordion menu design, that is created along with HTML and JavaScript. The menu is designed in the form of accordition style drop down. With over effects on the menu items as well as the sub menu items. It also highlights the selected menu item.

Title:

Pro-Sidebar

Author:

Joe Chien

Created on:

January 20, 2020

Made with:

HTML, CSS, Jquery

Responsive:

No

Dependencies:

Jquery

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A beautifully designed, fully collapsable CSS accordion sidebar menu. Created along with HTML and JavaScript. The menu is designed to display a title, a close button, search bar and user details on top. The menu items are also designed to contain icons and labels.

Title:

CSS Only Vertical Accordion Menu

Author:

Eriksen

Created on:

January 31, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A vertically positioned CSS accordition menu. With menu items designed with logos and highlighted with a gradient color scheme

Title:

Pro Slidebar template

Author:

Mohamed Azouaoui

Created on:

December 13, 2017

Made with:

HTML, SCSS, JavaScript(Babel)

Responsive:

Yes

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A completely responsive CSS accordion sidebar menu, Created along with HTML and JavaScript . The menu is designed to have multiple dropdowns and the menu items are displayed with icons and labels.

Title:

Bootstrap 4 side navigation

Author:

Reinier

Created on:

January 12, 2017

Made with:

HTML, CSS, JavaScript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A minimal and attractive CSS accordion sidebar menu, created along with HTML and JavaScript. The menu is designed with a header and tiles for menu items. The menu items also have count tags.

Title:

Untitled

Author:

anja

Created on:

April 17, 2016

Made with:

HTML, CSS, JavaScript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An uniquely designed CSS Accordion menu, created along with HTML and JavaScript. The menu is designed with animated icons as menu items and upon click it expands into a description.

Title:

Bootstrap 4 Sidebar Menu To Top

Author:

Serhii

Created on:

June 20, 2018

Made with:

HTML, CSS, JavaScript

Responsive:

No

Dependencies:

BootStrap

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A very simple CSS Sidebar Menu template. Created along with HTML, and JavaScript. The menu design is very simple and the dropdown is done in accordion style.

Title:

Css menu maker

Author:

Jose

Created on:

November 03, 2015

Made with:

HTML, CSS, JavaScript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A very minimal Sidebar template, created with HTML, CSS, and JavaScript. The menu items opens dropdown with a plus button which then converts into a cross button.

Title:

Bootstrap SideBar Menu

Author:

Hugh Balboa

Created on:

February 23, 2016

Made with:

HTML, CSS, JavaScript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A simple accordion menu bar template. Created with HTML, CSS and JavaScript. The menubar is designed to have highlighted header and an attractive hover strip.

Title:

Awesome Bootstrap 3 Sidebar Navigation

Author:

Jay Holtslander

Created on:

September 30, 2015

Made with:

HTML, CSS, JavaScript

Responsive:

No

Dependencies:

Bootstrap3

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A formal looking sidebar accordion menu created with HTML, CSS(Bootstrap) and JavaScript. The menu is completely collapsible and animates a beautiful transition effect upon hover.

Title:

Accordion

Author:

GreenSock

Created on:

July 19, 2021

Made with:

HTML, CSS, JavaScript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An amazing CSS accordion menu style, created along with HTML and JavaScript. It is designed to morph the list and make space for the content with amazingly fluid animations