Free Bootstrap 5 navbar snippet — Tab Bar Interaction with animation. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.
1<div class="items">
2 <div class="upper-bar"></div>
3
4 <div class="item browse">
5 <div class="item-img">
6 <svg version="1.1" id="browse" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
7 viewBox="0 0 81.7 81.2" style="enable-background:new 0 0 81.7 81.2;" xml:space="preserve">
8 <style type="text/css">
9 .itemStroke{fill:none;stroke:#B9C2CD;stroke-width:5;stroke-miterlimit:10;}
10 .itemFill{fill:#B9C2CD;}
11 </style>
12 <circle class="itemStroke" cx="40.8" cy="40.8" r="20.4"/>
13 <path class="itemFill" d="M23.4,35h37.8v5.8c0,0-17.7-1.9-17.8,20.2l-6.4-0.2c0,0,3.1-20-16.7-20.1V35H23.4z"/>
14 </svg>
15 </div>
16 <p class="item-name">Browse</p>
17 </div>
18
19 <div class="item profile">
20 <div class="item-img">
21 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
22 viewBox="0 0 81.7 81.2" style="enable-background:new 0 0 81.7 81.2;" xml:space="preserve">
23 <style type="text/css">
24 .itemFill{fill:#B9C2CD;}
25 </style>
26 <path class="itemFill" d="M20,57.5v-1c0-7.1,5.7-12.8,12.8-12.8h7.7h8.1c7.2,0,13.1,5.9,13.1,13.1v0.7c0,1.4-1.1,2.5-2.5,2.5H22.5
27 C21.1,59.9,20,58.8,20,57.5z"/>
28 <circle class="itemFill" cx="40.8" cy="28.7" r="9.7"/>
29 </svg>
30 </div>
31 <p class="item-name">Profile</p>
32 </div>
33
34 <div class="item chat">
35 <div class="item-img">
36 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
37 viewBox="0 0 81.7 81.2" style="enable-background:new 0 0 81.7 81.2;" xml:space="preserve">
38 <style type="text/css">
39 .itemFill{fill:#B9C2CD;}
40 </style>
41 <path class="itemFill" d="M55.7,19.3H26c-3.4,0-6.1,2.8-6.1,6.1V45c0,3.4,2.8,6.1,6.1,6.1h29.7c3.4,0,6.1-2.8,6.1-6.1V25.4
42 C61.8,22,59.1,19.3,55.7,19.3z"/>
43 <path class="itemFill" d="M32.9,57.6c0,1.3,1.2,2.3,2.5,2c1-0.2,2-0.6,2.9-1.6c2-2.3,7.3-7.8,7.3-7.8H32.9V57.6z"/>
44 </svg>
45 </div>
46 <p class="item-name">Chat</p>
47 </div>
48
49 <div class="item menu">
50 <div class="item-img">
51 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
52 viewBox="0 0 81.7 81.2" style="enable-background:new 0 0 81.7 81.2;" xml:space="preserve">
53 <style type="text/css">
54 .itemFill{fill:#B9C2CD;}
55 </style>
56 <path class="itemFill" d="M49.5,55.9h-27c-1,0-1.7-0.8-1.7-1.7v-1.5c0-1,0.8-1.7,1.7-1.7h27c1,0,1.7,0.8,1.7,1.7v1.5
57 C51.2,55.1,50.4,55.9,49.5,55.9z"/>
58 <path class="itemFill" d="M59.2,30.2h-27c-1,0-1.7-0.8-1.7-1.7v-1.5c0-1,0.8-1.7,1.7-1.7h27c1,0,1.7,0.8,1.7,1.7v1.5
59 C61,29.5,60.2,30.2,59.2,30.2z"/>
60 <path class="itemFill" d="M59.2,43.1H22.5c-1,0-1.7-0.8-1.7-1.7v-1.5c0-1,0.8-1.7,1.7-1.7h36.8c1,0,1.7,0.8,1.7,1.7v1.5
61 C61,42.3,60.2,43.1,59.2,43.1z"/>
62 </svg>
63 </div>
64 <p class="item-name">Menu</p>
65 </div>
66
67</div>
68<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
69<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js'></script>
70
71
72
73
Responsive Sidebar Navigation for Dashboard
Responsive Sidebar Navigation for Dashboard: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.
Bootstrap Transparent navbar example
Bootstrap Transparent navbar example — a free Bootstrap 5 navbar snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.
Bootstrap 5 e-commerce navigation with product snippet
Bootstrap 5 e-commerce navigation with product snippet: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.