Components : Fixed Header Component

Preview content adapted to proportion

Fixed Header Component

Navbar

It is used as a top-level navigation bar for websites or web applications to provide easy access to different sections and maintain a consistent user experience.

The component provides a fixed navigation header with a gradient background, responsive layout, and interactive elements like dropdown menus, search bar, and user profile.

The header includes interactive elements such as a hamburger menu for mobile devices, dropdown menus for navigation, a search bar, a shopping cart with a counter, and a user profile button. Hover effects and transitions enhance user engagement.


The header is designed to be responsive, adapting to different screen sizes. On smaller screens, the navigation links and search bar are hidden, and a hamburger menu is displayed. The layout adjusts for larger screens, showing full navigation options and additional elements.

Date : June 20, 2025
Views : 11
Copys : 0

fa-tags

Corporate websites, SaaS platforms, E-commerce sites, Portfolio websites Mobile applications, Admin dashboards, Web portals

Code

<div class="fixed top-0 z-50 w-full bg-gradient-to-r from-[#6d28d9] to-[#7c3aed] shadow-xl backdrop-blur-md transition-all duration-300 hover:shadow-2xl">
 <nav class="container mx-auto flex items-center justify-between px-4 py-3 md:px-6">
  <div class="flex items-center space-x-4">
   <button class="rounded-lg p-2 text-[#d9f99d] hover:bg-[#7c3aed]/30 lg:hidden">
    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewbox="0 0 24 24">
     <path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
     </path>
    </svg>
   </button>
   <a class="flex items-center space-x-2" href="#">
    <span class="text-2xl">
     🚀
    </span>
    <span class="text-xl font-bold text-[#d9f99d]">
     NovaTech
    </span>
   </a>
  </div>
  <div class="hidden items-center space-x-8 lg:flex">
   <div class="group relative">
    <button class="flex items-center space-x-1 text-white transition-all duration-200 hover:scale-105 hover:text-[#d9f99d]">
     <span>
      Products
     </span>
     <svg class="h-4 w-4" fill="none" stroke="currentColor" viewbox="0 0 24 24">
      <path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </button>
    <div class="absolute top-full mt-2 hidden w-48 rounded-lg bg-white/90 py-2 shadow-xl group-hover:block">
     <a class="block px-4 py-2 text-gray-800 hover:bg-[#7c3aed]/10" href="#">
      Software
     </a>
     <a class="block px-4 py-2 text-gray-800 hover:bg-[#7c3aed]/10" href="#">
      Hardware
     </a>
    </div>
   </div>
   <a class="text-white transition-all duration-200 hover:scale-105 hover:text-[#d9f99d]" href="#">
    Solutions
   </a>
   <a class="text-white transition-all duration-200 hover:scale-105 hover:text-[#d9f99d]" href="#">
    Pricing
   </a>
  </div>
  <div class="flex items-center space-x-4">
   <div class="hidden md:relative md:block">
    <input class="rounded-lg bg-white/20 px-4 py-2 text-white placeholder-gray-200 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-[#d9f99d]" placeholder="Search..." type="text"/>
   </div>
   <button class="relative text-white hover:text-[#d9f99d]">
    <span class="text-2xl">
     🛒
    </span>
    <span class="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs text-white">
     3
    </span>
   </button>
   <button class="flex items-center space-x-1 rounded-full bg-white/20 p-1 pr-3 backdrop-blur-sm hover:bg-white/30">
    <span class="h-8 w-8 rounded-full bg-gray-200 text-center">
     👤
    </span>
    <span class="text-white">
     John
    </span>
   </button>
  </div>
 </nav>
</div>


<template>
 <div class="fixed top-0 z-50 w-full bg-gradient-to-r from-[#6d28d9] to-[#7c3aed] shadow-xl backdrop-blur-md transition-all duration-300 hover:shadow-2xl">
  <nav class="container mx-auto flex items-center justify-between px-4 py-3 md:px-6">
   <div class="flex items-center space-x-4">
    <button class="rounded-lg p-2 text-[#d9f99d] hover:bg-[#7c3aed]/30 lg:hidden">
     <svg class="h-6 w-6" fill="none" stroke="currentColor" viewbox="0 0 24 24">
      <path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </button>
    <a class="flex items-center space-x-2" href="#">
     <span class="text-2xl">
      🚀
     </span>
     <span class="text-xl font-bold text-[#d9f99d]">
      NovaTech
     </span>
    </a>
   </div>
   <div class="hidden items-center space-x-8 lg:flex">
    <div class="group relative">
     <button class="flex items-center space-x-1 text-white transition-all duration-200 hover:scale-105 hover:text-[#d9f99d]">
      <span>
       Products
      </span>
      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewbox="0 0 24 24">
       <path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
       </path>
      </svg>
     </button>
     <div class="absolute top-full mt-2 hidden w-48 rounded-lg bg-white/90 py-2 shadow-xl group-hover:block">
      <a class="block px-4 py-2 text-gray-800 hover:bg-[#7c3aed]/10" href="#">
       Software
      </a>
      <a class="block px-4 py-2 text-gray-800 hover:bg-[#7c3aed]/10" href="#">
       Hardware
      </a>
     </div>
    </div>
    <a class="text-white transition-all duration-200 hover:scale-105 hover:text-[#d9f99d]" href="#">
     Solutions
    </a>
    <a class="text-white transition-all duration-200 hover:scale-105 hover:text-[#d9f99d]" href="#">
     Pricing
    </a>
   </div>
   <div class="flex items-center space-x-4">
    <div class="hidden md:relative md:block">
     <input class="rounded-lg bg-white/20 px-4 py-2 text-white placeholder-gray-200 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-[#d9f99d]" placeholder="Search..." type="text"/>
    </div>
    <button class="relative text-white hover:text-[#d9f99d]">
     <span class="text-2xl">
      🛒
     </span>
     <span class="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs text-white">
      3
     </span>
    </button>
    <button class="flex items-center space-x-1 rounded-full bg-white/20 p-1 pr-3 backdrop-blur-sm hover:bg-white/30">
     <span class="h-8 w-8 rounded-full bg-gray-200 text-center">
      👤
     </span>
     <span class="text-white">
      John
     </span>
    </button>
   </div>
  </nav>
 </div>
</template>
<script>
 export default {
    name: 'MyNavbarComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyNavbarComponent = () => {
    return (
<div>
<div class="fixed top-0 z-50 w-full bg-gradient-to-r from-[#6d28d9] to-[#7c3aed] shadow-xl backdrop-blur-md transition-all duration-300 hover:shadow-2xl">
 <nav class="container mx-auto flex items-center justify-between px-4 py-3 md:px-6">
  <div class="flex items-center space-x-4">
   <button class="rounded-lg p-2 text-[#d9f99d] hover:bg-[#7c3aed]/30 lg:hidden">
    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewbox="0 0 24 24">
     <path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
     </path>
    </svg>
   </button>
   <a class="flex items-center space-x-2" href="#">
    <span class="text-2xl">
     🚀
    </span>
    <span class="text-xl font-bold text-[#d9f99d]">
     NovaTech
    </span>
   </a>
  </div>
  <div class="hidden items-center space-x-8 lg:flex">
   <div class="group relative">
    <button class="flex items-center space-x-1 text-white transition-all duration-200 hover:scale-105 hover:text-[#d9f99d]">
     <span>
      Products
     </span>
     <svg class="h-4 w-4" fill="none" stroke="currentColor" viewbox="0 0 24 24">
      <path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </button>
    <div class="absolute top-full mt-2 hidden w-48 rounded-lg bg-white/90 py-2 shadow-xl group-hover:block">
     <a class="block px-4 py-2 text-gray-800 hover:bg-[#7c3aed]/10" href="#">
      Software
     </a>
     <a class="block px-4 py-2 text-gray-800 hover:bg-[#7c3aed]/10" href="#">
      Hardware
     </a>
    </div>
   </div>
   <a class="text-white transition-all duration-200 hover:scale-105 hover:text-[#d9f99d]" href="#">
    Solutions
   </a>
   <a class="text-white transition-all duration-200 hover:scale-105 hover:text-[#d9f99d]" href="#">
    Pricing
   </a>
  </div>
  <div class="flex items-center space-x-4">
   <div class="hidden md:relative md:block">
    <input class="rounded-lg bg-white/20 px-4 py-2 text-white placeholder-gray-200 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-[#d9f99d]" placeholder="Search..." type="text"/>
   </div>
   <button class="relative text-white hover:text-[#d9f99d]">
    <span class="text-2xl">
     🛒
    </span>
    <span class="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs text-white">
     3
    </span>
   </button>
   <button class="flex items-center space-x-1 rounded-full bg-white/20 p-1 pr-3 backdrop-blur-sm hover:bg-white/30">
    <span class="h-8 w-8 rounded-full bg-gray-200 text-center">
     👤
    </span>
    <span class="text-white">
     John
    </span>
   </button>
  </div>
 </nav>
</div>

</div>
    )
}
export default MyNavbarComponent;

Recommended Related Components

More+

Navigation Bar Component

The <span style="color:red !important">nav</span>igation bar is used to provide easy access to different sections of a website or application, enhancing user <span style="color:red !important">nav</span>igation and experience.

53
1

Navigation Bar

This component is used as the primary <span style="color:red !important">nav</span>igation element on websites, especially e-commerce platforms, portfolios, and business websites. It helps users easily access different sections of the site.

32
0

AstroNav

Used to guide users through different sections of a website, such as home, products, services, and contact.

19
0

Fixed Header Component

It is used as a top-level navigation bar for websites or web applications to provide easy access to different sections and maintain a consistent user experience.

11
0