navbar

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

Navbar

Author SANJAY SINGH GARIYA

1.8k

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

Life Tree
by salvator

Author:
Baraka Salvator

9 months ago

956
Tailwind Sidebar Layout

Author:
Junior Gauze

1 year ago

1.9k
Collapsible Sidebar Menu

Author:
Rajesh Maheshwari

1 year ago

2.5k
Navbar with sub menus

Author:
Rajesh Maheshwari

1 year ago

2.7k
Responsive Tailwind CSS Navbar
A clean and professional navigation bar built with Tailwind CSS. This component includes a logo, navigation links, and a mobile menu with a toggle button for smaller screens. Fully responsive and easy to integrate into any project. Ideal for portfolios, business websites, or modern web apps.

Author:
irahoza daniel

9 months ago

803
navigation
tailwind navigation pills

Author:
Anonymous

2 years ago

9.3k
Tailwind Sidebar Layout

Author:
nejaa badr

1 year ago

8.3k
tradition music
by salvator

Author:
Baraka Salvator

9 months ago

866
Responsive navbar
navbar with the dropdown on mobile devices

Author:
Piet Vriend

3 years ago

38.5k
Navbar
This navbar implementation includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background and accents 3. Dark mode support with a toggle button 4. Beautiful animations and effects: 1. Fade-in animation for menu items with staggered delays 2. Hover effects on menu items with underline animation 3. Smooth color transitions 4. Mobile menu slide-down animation 5. SVG icons for the dark mode toggle and mobile menu button 6. "Sign Up" call-to-action button 7. Mobile-friendly dropdown menu 8. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The navbar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with color changes and underline animations - The dark mode toggle changes its icon based on the current mode - The mobile menu slides down with a smooth animation when toggled - Desktop menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional navbar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

Author:
nejaa badr

1 year ago

4.6k
Navbar Section
Responsive Navbar

Author:
Noob

3 years ago

23.5k
Dark mode sidenav with collapsible menu

Author:
Rajesh Maheshwari

1 year ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components