navbar

This tailwind example is contributed by SANJAY SINGH GARIYA, on 12-Mar-2025. Component is made with Tailwind v3.4. It is responsive.

Navbar

Author SANJAY SINGH GARIYA

Tailwind v3.4 2.4k 5

Fork Fullscreen

<nav  class=" container mx-auto  flex justify-between items-center">
        
        <div  class="flex w-100 h-full flex-2 gap-5 items-center">
            <img class="w-24"  src="https://www.boat-lifestyle.com/cdn/shop/files/boAt_logo_black_24889e30-925c-4185-a028-9fef497a8e44.svg?v=1732879339" alt="" srcset="">
            <ul class="flex  flex-row flex-nowrap gap-10 items-center ">
                <li class="relative h-12 parent-cat ">
                    <div class=" h-full flex flex-col items-center justify-center">
                        <span class="flex ">Categories
                            <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="0" fill="none" width="24" height="24"/><g><path d="M7 10l5 5 5-5"/></g></svg>
                        </span>
                        <ul class="child-cat   bg-black text-white px-5 py-3  absolute top-[45px]  flex flex-col gap-5">
                            <li>Categories1</li>
                            <li>Categories1</li>
                            <li>Categories1</li>
                            <li>Categories1</li>
                            <li>Categories1</li>
                        </ul>
                    </div>

</li>
                <li>boAt Personalisation</li>
                <li>Corporate Orders </li>
                <li class="relative">

<div class="parent-cat">
                        <span class="flex " >Gifting Store
                            <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="0" fill="none" width="24" height="24"/><g><path d="M7 10l5 5 5-5"/></g></svg>
                        </span>
                        <ul class="child-cat   w-42 bg-black text-white px-5 py-3 child-cat absolute top-[35px]  flex flex-col gap-5">
                            <li>Gifting Store</li>
                            <li>Gifting Store</li>
                            <li>Gifting Store</li>
                            <li>Gifting Store</li>
                            <li>Gifting Store</li>
                        </ul>
                    </div>
                </li>
                <li class="relative">
                    <div class="parent-cat">
                        <span class="flex ">More 
                            <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="0" fill="none" width="24" height="24"/><g><path d="M7 10l5 5 5-5"/></g></svg>
                        </span>
                        <ul class="child-cat  w-42 bg-black text-white px-5 py-3  absolute top-[35px]  flex flex-col gap-5">
                            <li>Gifting Store</li>
                            <li>Gifting Store</li>
                            <li>Gifting Store</li>
                            <li>Gifting Store</li>
                            <li>Gifting Store</li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div class="flex flex-row gap-5 items-center" >
            <div class="relative w-64">
                <input type="text" placeholder="Earbuds" 
                    class="w-full bg-blue-100 rounded-2xl py-2 pl-10 pr-4 focus:outline-none">
                <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-6 h-6 " 
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
                    <path d="M46,40.02c0.005-0.262-0.092-0.526-0.293-0.727l-9-9c-0.391-0.391-1.023-0.391-1.414,0L35,30.586l-1.953-1.953 C34.287,26.362,35,23.764,35,21c0-0.289,0-1.615,0-2c0-8.822-7.178-16-16-16S3,10.178,3,19c0,0.338,0,1.662,0,2 c0,8.822,7.178,16,16,16c3.285,0,6.34-0.998,8.884-2.702l2.409,2.409L30.586,37l-0.293,0.293c-0.391,0.391-0.391,1.023,0,1.414 l7.274,7.274c0.671,0.671,1.552,1.006,2.433,1.006s1.762-0.335,2.433-1.006l3.274-3.274C45.902,42.512,46,42.256,46,42 C46,41.744,45.995,40.269,46,40.02z"/>
                </svg>
            </div>

<div class="shopping-cart">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" height="22" width="22" class="blank_cart">
                    <style type="text/css">
                    .st0{fill-rule:evenodd;clip-rule:evenodd; fill:#fff;}
            
                    @media(min-width: 768px){
                        .st0{fill:#000 !important;}
                    }
                    </style>
                    <path class="st0 header_cart_icon_svg" d="M14,6.1v1.2C14,7.6,14.4,8,14.7,8c0.4,0,0.7-0.3,0.7-0.7V6.1h1.4c0.6,0,1.1,0.4,1.2,1l1.4,12.2  c0.1,0.6-0.4,1.2-1,1.3c0,0-0.1,0-0.1,0H3.7c-0.6,0-1.2-0.5-1.2-1.2c0,0,0-0.1,0-0.1L4,7.1c0.1-0.6,0.6-1,1.2-1h1.4v1.2  C6.6,7.6,6.9,8,7.3,8S8,7.6,8,7.3V6.1H14z M15.4,4.7V4.4C15.4,2,13.5,0,11,0S6.6,2,6.6,4.4v0.2H5.2c-1.3,0-2.4,1-2.6,2.3L1.2,19.1  C1,20.5,2,21.8,3.4,22c0.1,0,0.2,0,0.3,0h14.5c1.4,0,2.6-1.2,2.6-2.6c0-0.1,0-0.2,0-0.3L19.4,7c-0.2-1.3-1.3-2.3-2.6-2.3H15.4z   M11,1.4c-1.7,0-3,1.4-3,3l0,0v0.2H14V4.4C14,2.8,12.7,1.4,11,1.4L11,1.4z"></path>
                    </svg>
            </div>
       </div>

</nav>

Related Examples

Hero w/ navbar
the modern and clean hero section

Carla Hoffman

2 years ago

5.9k
Garden
by salvator

Baraka Salvator

1 year ago

2.3k
Navbar with sub menus

Rajesh Maheshwari

1 year ago

3.7k
Dark mode sidenav with collapsible menu

Rajesh Maheshwari

1 year ago

2k
Colourful NavBar by Itunu Ijila
Responsive Colorful Navbar with Tailwind CSS - Free HTML Template Modern, mobile-friendly navigation bar built with Tailwind CSS featuring vibrant gradient colors (purple, pink, red). Includes hamburger menu for mobile devices, smooth hover effects, and easy customization. Perfect for websites, landing pages, and web applications. Copy-paste ready HTML code with Tailwind CDN - no build process required. Fully responsive design that works on all screen sizes. Keywords: Tailwind CSS navbar, responsive navigation bar, colorful navbar template, HTML navbar component, mobile menu, gradient navbar, Tailwind navigation, free navbar template

Ijila Itunu

9 months ago

493
Tailwind Sidebar Layout

nejaa badr

2 years ago

9.2k
websitee

Anonymous

1 year ago

955
Responsive Gradient Navbar

JUGENDRA GANGWAR

2 days ago

7
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Eamon Carter

3 years ago

29k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Ameth Galarcio

1 year ago

4.7k
Navbar

Morris Muriuki Muthigani

1 year ago

1.4k
Navbar
navbar

Haqiman

3 weeks ago

119