25+ CSS Accordion Menus

A curated collection of free 25+ HTML and CSS accordion menu examples. Best for web designers and developers, adds a smooth and dynamic navigation, allowing expand or collapse sections of content within a menu in a web project.

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