Components : Navigation Bar

Preview content adapted to proportion

Navigation Bar

Navbar

This component is used as the primary navigation element on websites, especially e-commerce platforms, portfolios, and business websites. It helps users easily access different sections of the site.

The navigation bar provides a structured and interactive way to navigate through a website. It includes a logo, menu items, a search bar, and a sign-in button. The mobile version features a responsive hamburger menu that reveals a full-screen menu when clicked.

The navigation bar allows users to interact with menu items, a search bar, and a sign-in button. Hover effects highlight menu items, and clicking on the hamburger menu on mobile reveals a full-screen navigation menu.


The navigation bar is designed to be responsive, adapting to different screen sizes. On larger screens, it displays horizontal menu items, a search bar, and a sign-in button. On smaller screens, it collapses into a hamburger menu that expands to show all navigation options.

Date : June 08, 2025
Views : 33
Copys : 0

fa-tags

E-commerce websites Portfolio websites Business websites Corporate sites

Code

<nav class="h-16 w-full bg-gradient-to-r from-[#1D293F] to-[#4B6A8C] shadow-lg sticky top-0 transition-all duration-300">
 <div class="max-w-7xl mx-auto px-4 h-full flex items-center justify-between">
  <div class="flex items-center gap-8 flex-1">
   <div class="flex items-center gap-2 text-white">
    <span class="text-2xl">
     🚀
    </span>
    <span class="font-bold text-lg tracking-wide">
     Brand
    </span>
   </div>
   <div class="hidden md:flex items-center gap-6 flex-1 ml-8">
    <div class="relative group">
     <button class="text-white hover:text-blue-300 transition-colors duration-300 flex items-center gap-1">
      Products
      <span class="text-sm">
       â–¼
      </span>
     </button>
     <div class="absolute hidden group-hover:flex flex-col bg-white shadow-lg rounded-lg p-4 gap-3 min-w-[200px] top-8">
      <a class="text-gray-700 hover:text-blue-600" href="#">
       Feature 1
      </a>
      <a class="text-gray-700 hover:text-blue-600" href="#">
       Feature 2
      </a>
     </div>
    </div>
    <a class="text-white hover:text-blue-300 transition-colors duration-300" href="#">
     Pricing
    </a>
    <a class="text-white hover:text-blue-300 transition-colors duration-300" href="#">
     Blog
    </a>
    <a class="text-white hover:text-blue-300 transition-colors duration-300" href="#">
     About
    </a>
    <a class="text-white hover:text-blue-300 transition-colors duration-300" href="#">
     Contact
    </a>
   </div>
  </div>
  <div class="hidden md:flex items-center gap-4">
   <div class="relative">
    <input class="px-4 py-2 rounded-full bg-white/20 text-white placeholder-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all duration-300" placeholder="Search" type="text"/>
   </div>
   <button class="bg-white text-[#2F80ED] px-6 py-2 rounded-full hover:bg-blue-50 transition-colors duration-300 flex items-center gap-2">
    <span>
     👤
    </span>
    Sign In
   </button>
  </div>
  <button class="md:hidden text-white text-2xl">
   ☰
  </button>
 </div>
 <div class="md:hidden fixed inset-0 bg-black/50 hidden">
  <div class="bg-white w-64 h-full ml-auto p-6 slide-in-right">
   <div class="flex flex-col gap-6">
    <input class="px-4 py-2 rounded-full bg-gray-100" placeholder="Search" type="text"/>
    <div class="flex flex-col gap-4">
     <a class="text-gray-700 hover:text-blue-600" href="#">
      Products
     </a>
     <a class="text-gray-700 hover:text-blue-600" href="#">
      Pricing
     </a>
     <a class="text-gray-700 hover:text-blue-600" href="#">
      Blog
     </a>
     <a class="text-gray-700 hover:text-blue-600" href="#">
      About
     </a>
     <a class="text-gray-700 hover:text-blue-600" href="#">
      Contact
     </a>
    </div>
    <button class="bg-[#2F80ED] text-white px-6 py-2 rounded-full flex items-center gap-2">
     <span>
      👤
     </span>
     Sign In
    </button>
   </div>
  </div>
 </div>
</nav>


<template>
 <nav class="h-16 w-full bg-gradient-to-r from-[#1D293F] to-[#4B6A8C] shadow-lg sticky top-0 transition-all duration-300">
  <div class="max-w-7xl mx-auto px-4 h-full flex items-center justify-between">
   <div class="flex items-center gap-8 flex-1">
    <div class="flex items-center gap-2 text-white">
     <span class="text-2xl">
      🚀
     </span>
     <span class="font-bold text-lg tracking-wide">
      Brand
     </span>
    </div>
    <div class="hidden md:flex items-center gap-6 flex-1 ml-8">
     <div class="relative group">
      <button class="text-white hover:text-blue-300 transition-colors duration-300 flex items-center gap-1">
       Products
       <span class="text-sm">
        â–¼
       </span>
      </button>
      <div class="absolute hidden group-hover:flex flex-col bg-white shadow-lg rounded-lg p-4 gap-3 min-w-[200px] top-8">
       <a class="text-gray-700 hover:text-blue-600" href="#">
        Feature 1
       </a>
       <a class="text-gray-700 hover:text-blue-600" href="#">
        Feature 2
       </a>
      </div>
     </div>
     <a class="text-white hover:text-blue-300 transition-colors duration-300" href="#">
      Pricing
     </a>
     <a class="text-white hover:text-blue-300 transition-colors duration-300" href="#">
      Blog
     </a>
     <a class="text-white hover:text-blue-300 transition-colors duration-300" href="#">
      About
     </a>
     <a class="text-white hover:text-blue-300 transition-colors duration-300" href="#">
      Contact
     </a>
    </div>
   </div>
   <div class="hidden md:flex items-center gap-4">
    <div class="relative">
     <input class="px-4 py-2 rounded-full bg-white/20 text-white placeholder-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all duration-300" placeholder="Search" type="text"/>
    </div>
    <button class="bg-white text-[#2F80ED] px-6 py-2 rounded-full hover:bg-blue-50 transition-colors duration-300 flex items-center gap-2">
     <span>
      👤
     </span>
     Sign In
    </button>
   </div>
   <button class="md:hidden text-white text-2xl">
    ☰
   </button>
  </div>
  <div class="md:hidden fixed inset-0 bg-black/50 hidden">
   <div class="bg-white w-64 h-full ml-auto p-6 slide-in-right">
    <div class="flex flex-col gap-6">
     <input class="px-4 py-2 rounded-full bg-gray-100" placeholder="Search" type="text"/>
     <div class="flex flex-col gap-4">
      <a class="text-gray-700 hover:text-blue-600" href="#">
       Products
      </a>
      <a class="text-gray-700 hover:text-blue-600" href="#">
       Pricing
      </a>
      <a class="text-gray-700 hover:text-blue-600" href="#">
       Blog
      </a>
      <a class="text-gray-700 hover:text-blue-600" href="#">
       About
      </a>
      <a class="text-gray-700 hover:text-blue-600" href="#">
       Contact
      </a>
     </div>
     <button class="bg-[#2F80ED] text-white px-6 py-2 rounded-full flex items-center gap-2">
      <span>
       👤
      </span>
      Sign In
     </button>
    </div>
   </div>
  </div>
 </nav>
</template>
<script>
 export default {
    name: 'MyNavbarComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyNavbarComponent = () => {
    return (
<div>
<nav class="h-16 w-full bg-gradient-to-r from-[#1D293F] to-[#4B6A8C] shadow-lg sticky top-0 transition-all duration-300">
 <div class="max-w-7xl mx-auto px-4 h-full flex items-center justify-between">
  <div class="flex items-center gap-8 flex-1">
   <div class="flex items-center gap-2 text-white">
    <span class="text-2xl">
     🚀
    </span>
    <span class="font-bold text-lg tracking-wide">
     Brand
    </span>
   </div>
   <div class="hidden md:flex items-center gap-6 flex-1 ml-8">
    <div class="relative group">
     <button class="text-white hover:text-blue-300 transition-colors duration-300 flex items-center gap-1">
      Products
      <span class="text-sm">
       â–¼
      </span>
     </button>
     <div class="absolute hidden group-hover:flex flex-col bg-white shadow-lg rounded-lg p-4 gap-3 min-w-[200px] top-8">
      <a class="text-gray-700 hover:text-blue-600" href="#">
       Feature 1
      </a>
      <a class="text-gray-700 hover:text-blue-600" href="#">
       Feature 2
      </a>
     </div>
    </div>
    <a class="text-white hover:text-blue-300 transition-colors duration-300" href="#">
     Pricing
    </a>
    <a class="text-white hover:text-blue-300 transition-colors duration-300" href="#">
     Blog
    </a>
    <a class="text-white hover:text-blue-300 transition-colors duration-300" href="#">
     About
    </a>
    <a class="text-white hover:text-blue-300 transition-colors duration-300" href="#">
     Contact
    </a>
   </div>
  </div>
  <div class="hidden md:flex items-center gap-4">
   <div class="relative">
    <input class="px-4 py-2 rounded-full bg-white/20 text-white placeholder-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all duration-300" placeholder="Search" type="text"/>
   </div>
   <button class="bg-white text-[#2F80ED] px-6 py-2 rounded-full hover:bg-blue-50 transition-colors duration-300 flex items-center gap-2">
    <span>
     👤
    </span>
    Sign In
   </button>
  </div>
  <button class="md:hidden text-white text-2xl">
   ☰
  </button>
 </div>
 <div class="md:hidden fixed inset-0 bg-black/50 hidden">
  <div class="bg-white w-64 h-full ml-auto p-6 slide-in-right">
   <div class="flex flex-col gap-6">
    <input class="px-4 py-2 rounded-full bg-gray-100" placeholder="Search" type="text"/>
    <div class="flex flex-col gap-4">
     <a class="text-gray-700 hover:text-blue-600" href="#">
      Products
     </a>
     <a class="text-gray-700 hover:text-blue-600" href="#">
      Pricing
     </a>
     <a class="text-gray-700 hover:text-blue-600" href="#">
      Blog
     </a>
     <a class="text-gray-700 hover:text-blue-600" href="#">
      About
     </a>
     <a class="text-gray-700 hover:text-blue-600" href="#">
      Contact
     </a>
    </div>
    <button class="bg-[#2F80ED] text-white px-6 py-2 rounded-full flex items-center gap-2">
     <span>
      👤
     </span>
     Sign In
    </button>
   </div>
  </div>
 </div>
</nav>

</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.

33
0

AstroNav

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

20
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