Bootstrap 5 accordion dropdown menu snippets

Accordions Bootstrap 5Free+ CSS+ JS

Bootstrap 5 accordion dropdown menu snippets: a hand-crafted, open-source Bootstrap 5 accordion. HTML, CSS & JS included, ready to copy.

6.5k views158 downloads6 years ago

gosnippets.com/preview/bootstrap-5-accordion-dropdown-menu-snippets

Source Code

1<div class="container">
2    <ul id="accordion" class="accordion">
3        <li>
4            <div class="link"><i class="fa fa-laptop"></i>Laptops<i class="fa fa-chevron-down"></i></div>
5            <ul class="submenu">
6                <li><a href="#">Dell Acron</a></li>
7                <li><a href="#">HP Envy</a></li>
8                <li><a href="#">Macbook Air</a></li>
9            </ul>
10        </li>
11        <li>
12            <div class="link"><i class="fa fa-tv"></i>Smart TV<i class="fa fa-chevron-down"></i></div>
13            <ul class="submenu">
14                <li><a href="#">Sony Bravia</a></li>
15                <li><a href="#">Samsung</a></li>
16                <li><a href="#">MI</a></li>
17            </ul>
18        </li>
19        <li>
20            <div class="link"><i class="fa fa-mobile"></i>Mobiles<i class="fa fa-chevron-down"></i></div>
21            <ul class="submenu">
22                <li><a href="#">Samsung S9</a></li>
23                <li><a href="#">Apple X</a></li>
24                <li><a href="#">Honor Play</a></li>
25            </ul>
26        </li>
27        <li>
28            <div class="link"><i class="fa fa-globe"></i>Search Engines<i class="fa fa-chevron-down"></i></div>
29            <ul class="submenu">
30                <li><a href="#">Google</a></li>
31                <li><a href="#">Bing</a></li>
32                <li><a href="#">Yahoo</a></li>
33            </ul>
34        </li>
35    </ul>
36</div>

More Accordions snippets

Bootstrap 5 accordion with chevron up and down

Free Bootstrap 5 accordion snippet — Bootstrap 5 accordion with chevron up and down. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

AccordionsView →

Cool image accordion with pure CSS

Add a accordion to your UI with Cool image accordion with pure CSS. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

AccordionsView →

Bootstrap 5 Progress card with hover effect snippet

Bootstrap 5 Progress card with hover effect snippet: a hand-crafted, open-source Bootstrap 5 accordion. HTML & CSS included, ready to copy.

AccordionsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="container"> 2 <ul id="accordion" class="accordion"> 3 <li> 4 <div class="link"><i class="fa fa-laptop"></i>Laptops<i class="fa fa-chevron-down"></i></div> 5 <ul class="submenu"> 6 <li><a href="#">Dell Acron</a></li> 7 <li><a href="#">HP Envy</a></li> 8 <li><a href="#">Macbook Air</a></li> 9 </ul> 10 </li> 11 <li> 12 <div class="link"><i class="fa fa-tv"></i>Smart TV<i class="fa fa-chevron-down"></i></div> 13 <ul class="submenu"> 14 <li><a href="#">Sony Bravia</a></li> 15 <li><a href="#">Samsung</a></li> 16 <li><a href="#">MI</a></li> 17 </ul> 18 </li> 19 <li> 20 <div class="link"><i class="fa fa-mobile"></i>Mobiles<i class="fa fa-chevron-down"></i></div> 21 <ul class="submenu"> 22 <li><a href="#">Samsung S9</a></li> 23 <li><a href="#">Apple X</a></li> 24 <li><a href="#">Honor Play</a></li> 25 </ul> 26 </li> 27 <li> 28 <div class="link"><i class="fa fa-globe"></i>Search Engines<i class="fa fa-chevron-down"></i></div> 29 <ul class="submenu"> 30 <li><a href="#">Google</a></li> 31 <li><a href="#">Bing</a></li> 32 <li><a href="#">Yahoo</a></li> 33 </ul> 34 </li> 35 </ul> 36</div>