The bottom navigation tab bar is a commonly used component. It is seen in many apps and websites. I was developing a website with Tailwind CSS which needed a bottom navigation bar and I was able to do it quickly in just a few lines of code. This is how it looks 👇🏻
If you are looking for a free download of the bottom navigation tab bar component then you are at the right place.
Checkout the full source code for the bottom tab bar for a mobile website made using Tailwind CSS
<div
class="flex h-14 justify-around border-t border-gray-200 bg-white shadow-lg"
>
<div class="flex flex-col items-center justify-center text-gray-950">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="{1.5}"
stroke="currentColor"
class="h-6 w-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
/>
</svg>
<div class="text-sm">Home</div>
</div>
<div class="flex flex-col items-center justify-center text-gray-950">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="{1.5}"
stroke="currentColor"
class="h-6 w-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"
/>
</svg>
<div class="text-sm">Categories</div>
</div>
<div class="flex flex-col items-center justify-center text-gray-950">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="{1.5}"
stroke="currentColor"
class="h-6 w-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
/>
</svg>
<div class="text-sm">Categories</div>
</div>
<div class="flex flex-col items-center justify-center text-gray-950">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="{1.5}"
stroke="currentColor"
class="h-6 w-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
/>
</svg>
<div class="text-sm">Account</div>
</div>
</div>
Tailwind CSS bottom navigation demo
Here’s an example usage demo for the bottom navigation bar in Tailwind Play – Bottom navigation tabs demo tailwind
Conclusion
This is an HTML example but it works for react as well. Just replace the word “class” with “className” in the above code and you’ll be able to use it in ReactJS websites, NextJS, or Gatsby websites as well!
Also read, Furniture App – React Native – Speed Code