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.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.