Components : Navigation Bar Component

Preview content adapted to proportion

Navigation Bar Component

Navbar

The navigation bar is used to provide easy access to different sections of a website or application, enhancing user navigation and experience.

This component provides a fixed navigation bar with a logo, menu links, a search bar, and a mobile menu toggle. It includes dropdown functionality for services and responsive design for both desktop and mobile views.

Users can interact with the navigation bar by clicking on links, toggling the mobile menu, and accessing dropdown menus. The search bar allows users to search within the site. Hover effects and transitions provide visual feedback.


The navigation bar is designed to be responsive, adapting to different screen sizes. On desktop, it displays a horizontal menu with dropdowns, while on mobile, it collapses into a vertical menu with a hamburger icon.

Date : June 02, 2025
Views : 53
Copys : 1

fa-tags

Website headers, web applications, e-commerce platforms, multi-page projects Mobile applications, responsive web design, user interface development

Code

<nav class="fixed top-0 w-full bg-slate-800 shadow-xl backdrop-blur-lg z-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <div class="flex justify-between h-16">
   <div class="flex items-center">
    <span class="text-teal-400 text-2xl font-bold">
     Logo
    </span>
    <div class="hidden md:flex items-center ml-10 space-x-8">
     <a class="text-slate-200 hover:text-teal-300 transition-all duration-300 transform hover:scale-105" href="#">
      Home
     </a>
     <a class="text-slate-200 hover:text-teal-300 transition-all duration-300 transform hover:scale-105" href="#">
      Products
     </a>
     <div class="group relative">
      <button class="text-slate-200 hover:text-teal-300 focus:outline-none transition-colors">
       Services ▾
      </button>
      <div class="absolute hidden group-hover:block bg-slate-700 mt-2 py-2 w-48 rounded-lg shadow-xl">
       <a class="block px-4 py-2 text-slate-200 hover:bg-slate-600" href="#">
        Consulting
       </a>
       <a class="block px-4 py-2 text-slate-200 hover:bg-slate-600" href="#">
        Development
       </a>
      </div>
     </div>
    </div>
   </div>
   <div class="flex items-center space-x-6">
    <div class="relative hidden md:block">
     <input class="pl-10 pr-4 py-2 bg-slate-700 rounded-full text-slate-200 focus:outline-none focus:ring-2 focus:ring-teal-400" placeholder="Search" type="search"/>
     <span class="absolute left-3 top-2.5 text-slate-400">
      🔍
     </span>
    </div>
    <button class="text-slate-200 hover:text-teal-300 transition-colors">
     👤
    </button>
    <button class="md:hidden text-slate-200 focus:outline-none">
     <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>
   </div>
  </div>
  <div class="md:hidden pb-3 space-y-2">
   <a class="block px-3 py-2 text-slate-200 hover:bg-slate-700 rounded-lg" href="#">
    Home
   </a>
   <a class="block px-3 py-2 text-slate-200 hover:bg-slate-700 rounded-lg" href="#">
    Products
   </a>
   <div class="space-y-2">
    <button class="w-full text-left px-3 py-2 text-slate-200 hover:bg-slate-700 rounded-lg">
     Services ▸
    </button>
    <div class="ml-4 space-y-2">
     <a class="block px-3 py-2 text-slate-300 hover:bg-slate-700 rounded-lg" href="#">
      Consulting
     </a>
     <a class="block px-3 py-2 text-slate-300 hover:bg-slate-700 rounded-lg" href="#">
      Development
     </a>
    </div>
   </div>
   <div class="px-3">
    <input class="w-full pl-10 pr-4 py-2 bg-slate-700 rounded-full text-slate-200 focus:outline-none focus:ring-2 focus:ring-teal-400" placeholder="Search" type="search"/>
   </div>
  </div>
 </div>
</nav>


<template>
 <nav class="fixed top-0 w-full bg-slate-800 shadow-xl backdrop-blur-lg z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
   <div class="flex justify-between h-16">
    <div class="flex items-center">
     <span class="text-teal-400 text-2xl font-bold">
      Logo
     </span>
     <div class="hidden md:flex items-center ml-10 space-x-8">
      <a class="text-slate-200 hover:text-teal-300 transition-all duration-300 transform hover:scale-105" href="#">
       Home
      </a>
      <a class="text-slate-200 hover:text-teal-300 transition-all duration-300 transform hover:scale-105" href="#">
       Products
      </a>
      <div class="group relative">
       <button class="text-slate-200 hover:text-teal-300 focus:outline-none transition-colors">
        Services ▾
       </button>
       <div class="absolute hidden group-hover:block bg-slate-700 mt-2 py-2 w-48 rounded-lg shadow-xl">
        <a class="block px-4 py-2 text-slate-200 hover:bg-slate-600" href="#">
         Consulting
        </a>
        <a class="block px-4 py-2 text-slate-200 hover:bg-slate-600" href="#">
         Development
        </a>
       </div>
      </div>
     </div>
    </div>
    <div class="flex items-center space-x-6">
     <div class="relative hidden md:block">
      <input class="pl-10 pr-4 py-2 bg-slate-700 rounded-full text-slate-200 focus:outline-none focus:ring-2 focus:ring-teal-400" placeholder="Search" type="search"/>
      <span class="absolute left-3 top-2.5 text-slate-400">
       🔍
      </span>
     </div>
     <button class="text-slate-200 hover:text-teal-300 transition-colors">
      👤
     </button>
     <button class="md:hidden text-slate-200 focus:outline-none">
      <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>
    </div>
   </div>
   <div class="md:hidden pb-3 space-y-2">
    <a class="block px-3 py-2 text-slate-200 hover:bg-slate-700 rounded-lg" href="#">
     Home
    </a>
    <a class="block px-3 py-2 text-slate-200 hover:bg-slate-700 rounded-lg" href="#">
     Products
    </a>
    <div class="space-y-2">
     <button class="w-full text-left px-3 py-2 text-slate-200 hover:bg-slate-700 rounded-lg">
      Services ▸
     </button>
     <div class="ml-4 space-y-2">
      <a class="block px-3 py-2 text-slate-300 hover:bg-slate-700 rounded-lg" href="#">
       Consulting
      </a>
      <a class="block px-3 py-2 text-slate-300 hover:bg-slate-700 rounded-lg" href="#">
       Development
      </a>
     </div>
    </div>
    <div class="px-3">
     <input class="w-full pl-10 pr-4 py-2 bg-slate-700 rounded-full text-slate-200 focus:outline-none focus:ring-2 focus:ring-teal-400" placeholder="Search" type="search"/>
    </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="fixed top-0 w-full bg-slate-800 shadow-xl backdrop-blur-lg z-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <div class="flex justify-between h-16">
   <div class="flex items-center">
    <span class="text-teal-400 text-2xl font-bold">
     Logo
    </span>
    <div class="hidden md:flex items-center ml-10 space-x-8">
     <a class="text-slate-200 hover:text-teal-300 transition-all duration-300 transform hover:scale-105" href="#">
      Home
     </a>
     <a class="text-slate-200 hover:text-teal-300 transition-all duration-300 transform hover:scale-105" href="#">
      Products
     </a>
     <div class="group relative">
      <button class="text-slate-200 hover:text-teal-300 focus:outline-none transition-colors">
       Services ▾
      </button>
      <div class="absolute hidden group-hover:block bg-slate-700 mt-2 py-2 w-48 rounded-lg shadow-xl">
       <a class="block px-4 py-2 text-slate-200 hover:bg-slate-600" href="#">
        Consulting
       </a>
       <a class="block px-4 py-2 text-slate-200 hover:bg-slate-600" href="#">
        Development
       </a>
      </div>
     </div>
    </div>
   </div>
   <div class="flex items-center space-x-6">
    <div class="relative hidden md:block">
     <input class="pl-10 pr-4 py-2 bg-slate-700 rounded-full text-slate-200 focus:outline-none focus:ring-2 focus:ring-teal-400" placeholder="Search" type="search"/>
     <span class="absolute left-3 top-2.5 text-slate-400">
      🔍
     </span>
    </div>
    <button class="text-slate-200 hover:text-teal-300 transition-colors">
     👤
    </button>
    <button class="md:hidden text-slate-200 focus:outline-none">
     <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>
   </div>
  </div>
  <div class="md:hidden pb-3 space-y-2">
   <a class="block px-3 py-2 text-slate-200 hover:bg-slate-700 rounded-lg" href="#">
    Home
   </a>
   <a class="block px-3 py-2 text-slate-200 hover:bg-slate-700 rounded-lg" href="#">
    Products
   </a>
   <div class="space-y-2">
    <button class="w-full text-left px-3 py-2 text-slate-200 hover:bg-slate-700 rounded-lg">
     Services ▸
    </button>
    <div class="ml-4 space-y-2">
     <a class="block px-3 py-2 text-slate-300 hover:bg-slate-700 rounded-lg" href="#">
      Consulting
     </a>
     <a class="block px-3 py-2 text-slate-300 hover:bg-slate-700 rounded-lg" href="#">
      Development
     </a>
    </div>
   </div>
   <div class="px-3">
    <input class="w-full pl-10 pr-4 py-2 bg-slate-700 rounded-full text-slate-200 focus:outline-none focus:ring-2 focus:ring-teal-400" placeholder="Search" type="search"/>
   </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.

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.

10
0