Home
Aman kumar
Navbar

Navbar

E-commerce Navbar

This tailwind example is contributed by Aman kumar, on 09-May-2024. Component is made with Tailwind CSS v3. It is responsive.

Header Navigations Navbar

Author Aman kumar

1.9k

Fork Fullscreen

</div>
        <div class="flex justify-items-center items-center gap-2 ">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
            class="w-5 h-5 text-yellow-300 hidden lg:block md:block">
            <path fill-rule="evenodd"
              d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
              clip-rule="evenodd" />
          </svg>

<p class="text-sm text-white hidden lg:block md:block">Order now and get it within
            <span class="text-yellow-300">15 mint!</span></p>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-8 h-8 text-white rounded-full ring-2 ring-white p-1 relative">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
            
          </svg>

</div>

Related Examples

Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

1 year ago

16.8k
Navbar compoent

Author:
Amit Pachange

1 year ago

12.9k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

8 months ago

4.8k
Animated navigation with Tailwind CSS and Apinejs

Author:
Michael Andreuzza

6 months ago

2.2k
New Nav Component
A new navigation component

Author:
Amit PR

6 months ago

1.6k
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

4 months ago

1.2k
Tailwind css navigation header
Tailwind css navigation header

Author:
Abid Ullah

3 months ago

766
Animated underline hover navbar
Simple animated underline hover effect navbar.

Author:
inbarajan P

2 months ago

664
navigation header
responsive navigation header

Author:
Abid Ullah

2 months ago

575
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

2 weeks ago

251
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

1 month ago

575
boxed layout
boxed layout- navigaiton

Author:
Anonymous

1 year ago

7.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent