25+ CSS Accordion Menus

Are you looking for visually stunning and user-friendly accordion menus for your app project? We are featuring a curated collection of free HTML and CSS accordion menu code examples that add a touch of interactivity to your website.

We’ve gathered these unique and stylish accordion menus from popular sites like GitHub and Codepen. Add smooth and dynamic navigation to your web project, allowing users to expand or collapse sections of content within a menu.

Whether you’re a web designer or developer, we have a wide range of accordion menus for all skill levels. From simple accordion menus to modern or more advanced accordion, these CSS-driven accordion examples will surely add depth and dynamism to your web site. So, why wait? Let’s checkout the true power of CSS and explore our visually stunning top CSS accordion menus.

1. Swanky Pure CSS Drop Down Menu V2.0

See the Pen <a href="https://codepen.io/jcoulterdesign/pen/qdWxEm"> Swanky Pure CSS Drop Down Menu V2.0</a> by Jamie Coulter (<a href="https://codepen.io/jcoulterdesign">@jcoulterdesign</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jamie Coulter
Source: Code / Demo
Created on: APRIL 19, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

2. Smooth Accordion Dropdown Menu

See the Pen <a href="https://codepen.io/fainder/pen/qBwBeO"> Smooth Accordion Dropdown Menu</a> by fainder (<a href="https://codepen.io/fainder">@fainder</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: fainder
Source: Code / Demo
Created on: OCTOBER 13, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

3. Accordion Menu

See the Pen <a href="https://codepen.io/ahmadbassamemran/pen/BPbVPe"> Accordion Menu</a> by Ahmad Emran (<a href="https://codepen.io/ahmadbassamemran">@ahmadbassamemran</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ahmad Emran
Source: Code / Demo
Created on: AUGUST 13, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

4. HTML + CSS Only Accordion

See the Pen <a href="https://codepen.io/blackellis/pen/OJyeNoM"> HTML + CSS Only Accordion</a> by Alina N. (<a href="https://codepen.io/blackellis">@blackellis</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alina N.
Source: Code / Demo
Created on: MAY 28, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. Accordion menu

See the Pen <a href="https://codepen.io/MrsColombo/pen/mEeQwy"> Accordion menu</a> by JuliaRietveld (<a href="https://codepen.io/MrsColombo">@MrsColombo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: JuliaRietveld
Source: Code / Demo
Created on: JUNE 8, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

6. Accordion Menu + Tooltip

See the Pen <a href="https://codepen.io/morimiko/pen/prMyrO"> Accordion Menu + Tooltip</a> by mori (<a href="https://codepen.io/morimiko">@morimiko</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: mori
Source: Code / Demo
Created on: SEPTEMBER 9, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Pure HTML+CSS Accordion (Without Javascript)

See the Pen <a href="https://codepen.io/dandiws/pen/qqyeed"> Pure HTML+CSS Accordion (Without Javascript)</a> by Dandi Wiratsangka (<a href="https://codepen.io/dandiws">@dandiws</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dandi Wiratsangka
Source: Code / Demo
Created on: DECEMBER 11, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. AcidBath Accordion Menu

See the Pen <a href="https://codepen.io/BoiseDigital/pen/KKNLYX"> AcidBath Accordion Menu</a> by Nicholas (<a href="https://codepen.io/BoiseDigital">@BoiseDigital</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nicholas
Source: Code / Demo
Created on: MAY 15, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

9. hamburger slide accordion menu

See the Pen <a href="https://codepen.io/slyka85/pen/LbXYKQ"> hamburger slide accordion menu</a> by Anya Melnyk (<a href="https://codepen.io/slyka85">@slyka85</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Anya Melnyk
Source: Code / Demo
Created on: DECEMBER 14, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

10. CSS3 Multiple Accordion Menu

See the Pen <a href="https://codepen.io/Frecosse/pen/kavMYN"> CSS3 Multiple Accordion Menu</a> by Graeme Attkins (<a href="https://codepen.io/Frecosse">@Frecosse</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Graeme Attkins
Source: Code / Demo
Created on: JANUARY 31, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Pure CSS Accordion

See the Pen <a href="https://codepen.io/raubaca/pen/PZzpVe"> Pure CSS Accordion</a> by Raúl Barrera (<a href="https://codepen.io/raubaca">@raubaca</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Raúl Barrera
Source: Code / Demo
Created on: DECEMBER 21, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Awesome accordion menu using only HTML & CSS

See the Pen <a href="https://codepen.io/ahmadbassamemran/pen/zXwZKo"> Awesome accordion menu using only HTML & CSS</a> by Ahmad Emran (<a href="https://codepen.io/ahmadbassamemran">@ahmadbassamemran</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ahmad Emran
Source: Code / Demo
Created on: APRIL 11, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. Menú despegable estilo acordeón | Accordion Menu

See the Pen <a href="https://codepen.io/Creaticode/pen/jOXpzd"> Menú despegable estilo acordeón | Accordion Menu</a> by Agustin Ortiz (<a href="https://codepen.io/Creaticode">@Creaticode</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Agustin Ortiz
Source: Code / Demo
Created on: SEPTEMBER 28, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

14. collapse menu

See the Pen <a href="https://codepen.io/DanieleManzi/pen/XWJMxMQ"> collapse menu</a> by Daniele Manzi (<a href="https://codepen.io/DanieleManzi">@DanieleManzi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daniele Manzi
Source: Code / Demo
Created on: DECEMBER 20, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Accordion Menu Using Only HTML & CSS

See the Pen <a href="https://codepen.io/Okba-Design/pen/gOPyzBg"> Accordion Menu Using Only HTML & CSS</a> by Okba Design (<a href="https://codepen.io/Okba-Design">@Okba-Design</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Okba Design
Source: Code / Demo
Created on: JULY 27, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. Awesome Accordion Menu Using HTM & CSS

See the Pen <a href="https://codepen.io/fadzrinmadu/pen/MWKvoqW"> Awesome Accordion Menu Using HTM & CSS</a> by Muhammad Fadzrin Madu (<a href="https://codepen.io/fadzrinmadu">@fadzrinmadu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Muhammad Fadzrin Madu
Source: Code / Demo
Created on: JUNE 27, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. Accordion Menu

See the Pen <a href="https://codepen.io/VelihanKara/pen/qBZmbGm"> Accordion Menu</a> by Velihan (<a href="https://codepen.io/VelihanKara">@VelihanKara</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Velihan
Source: Code / Demo
Created on: AUGUST 27, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript

18. Pure Css Accordion Menu

See the Pen <a href="https://codepen.io/anzjoy/pen/kymqbZ"> Pure Css Accordion Menu</a> by Anz Joy (<a href="https://codepen.io/anzjoy">@anzjoy</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Anz Joy
Source: Code / Demo
Created on: FEBRUARY 15, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. CSS sliding multi-level accordion

See the Pen <a href="https://codepen.io/alexdevero/pen/avKpLX"> CSS sliding multi-level accordion</a> by Alex Devero (<a href="https://codepen.io/alexdevero">@alexdevero</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex Devero
Source: Code / Demo
Created on: OCTOBER 30, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Accordion

See the Pen <a href="https://codepen.io/tari/pen/VYRpVo"> Accordion</a> by ari (<a href="https://codepen.io/tari">@tari</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ari
Source: Code / Demo
Created on: MARCH 28, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

21. CSS Only Vertical Accordion Menu

See the Pen <a href="https://codepen.io/eriksenlezama/pen/EQarpO"> CSS Only Vertical Accordion Menu</a> by Eriksen (<a href="https://codepen.io/eriksenlezama">@eriksenlezama</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Eriksen
Source: Code / Demo
Created on: JANUARY 31, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Simple Accordion Menu

See the Pen <a href="https://codepen.io/coreyroth/pen/ZEeMog"> Simple Accordion Menu</a> by Corey Roth (<a href="https://codepen.io/coreyroth">@coreyroth</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Corey Roth
Source: Code / Demo
Created on: MAY 30, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

23. Accordion menu by CSS

See the Pen <a href="https://codepen.io/takanorip/pen/gMepOp"> Accordion menu by CSS</a> by takanorip (<a href="https://codepen.io/takanorip">@takanorip</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: takanorip
Source: Code / Demo
Created on: JULY 20, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. Only CSS3 Dropdown Menu

See the Pen <a href="https://codepen.io/pedronauck/pen/ALeeNp"> Only CSS3 Dropdown Menu</a> by Pedro Nauck (<a href="https://codepen.io/pedronauck">@pedronauck</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Pedro Nauck
Source: Code / Demo
Created on: AUGUST 29, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

25. Accordion Menu

See the Pen <a href="https://codepen.io/maggiben/pen/bGpzPj"> Accordion Menu</a> by Benjamin (<a href="https://codepen.io/maggiben">@maggiben</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Benjamin
Source: Code / Demo
Created on: APRIL 19, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript

26. Accordion Menu With Icon

See the Pen <a href="https://codepen.io/kanhasahu/pen/PNjWwy"> Accordion Menu With Icon</a> by Kanha Sahu (<a href="https://codepen.io/kanhasahu">@kanhasahu</a>) on <a href="https://codepen.io">CodePen</a>. Author: Kanha Sahu
Source: Code / Demo
Created on: MARCH 26, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS