Components : AstroNav

Preview content adapted to proportion

AstroNav

Navbar

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

A navigation bar component that provides a sleek and responsive user interface for website navigation.

Users can hover over menu items to see color and scale changes, and click on links to navigate. On mobile devices, a hamburger menu button is provided for compact navigation.


The design adjusts to different screen sizes. On smaller screens (mobile), the navigation links and button are hidden behind a hamburger menu, while on larger screens, they are displayed inline for easy access.

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

fa-tags

Corporate websites, e-commerce platforms, personal blogs, and any web application requiring a user-friendly navigation system.

Code

<nav class="bg-gray-100 text-gray-900 transition duration-300 ease-out hover:shadow-lg active:shadow-sm focus:ring-2 ring-blue-500 w-full mx-auto max-w-7xl sm:px-4 md:px-6 xl:px-12">
 <div class="flex justify-between items-center p-6">
  <div class="flex-shrink-0 font-bold flex items-center gap-2">
   <span>
    🚀
   </span>
   <span>
    AstroNav
   </span>
  </div>
  <button class="md:hidden p-2 rounded-lg hover:bg-gray-200 transition-colors">
   <span class="text-2xl">
    🍔
   </span>
  </button>
  <ul class="hidden md:flex md:gap-6 list-none items-center">
   <li>
    <a class="px-2 py-1 text-sm hover:text-orange-500 hover:scale-105 transition-all duration-300 flex items-center" href="#">
     Home
    </a>
   </li>
   <li>
    <a class="px-2 py-1 text-sm hover:text-orange-500 hover:scale-105 transition-all duration-300 flex items-center" href="#">
     Products
    </a>
   </li>
   <li>
    <a class="px-2 py-1 text-sm hover:text-orange-500 hover:scale-105 transition-all duration-300 flex items-center" href="#">
     Services
    </a>
   </li>
   <li>
    <a class="px-2 py-1 text-sm hover:text-orange-500 hover:scale-105 transition-all duration-300 flex items-center" href="#">
     Contact
    </a>
   </li>
  </ul>
  <div class="hidden md:flex items-center gap-4">
   <button class="bg-black text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition-colors">
    Get Started
   </button>
  </div>
 </div>
</nav>


<template>
 <nav class="bg-gray-100 text-gray-900 transition duration-300 ease-out hover:shadow-lg active:shadow-sm focus:ring-2 ring-blue-500 w-full mx-auto max-w-7xl sm:px-4 md:px-6 xl:px-12">
  <div class="flex justify-between items-center p-6">
   <div class="flex-shrink-0 font-bold flex items-center gap-2">
    <span>
     🚀
    </span>
    <span>
     AstroNav
    </span>
   </div>
   <button class="md:hidden p-2 rounded-lg hover:bg-gray-200 transition-colors">
    <span class="text-2xl">
     🍔
    </span>
   </button>
   <ul class="hidden md:flex md:gap-6 list-none items-center">
    <li>
     <a class="px-2 py-1 text-sm hover:text-orange-500 hover:scale-105 transition-all duration-300 flex items-center" href="#">
      Home
     </a>
    </li>
    <li>
     <a class="px-2 py-1 text-sm hover:text-orange-500 hover:scale-105 transition-all duration-300 flex items-center" href="#">
      Products
     </a>
    </li>
    <li>
     <a class="px-2 py-1 text-sm hover:text-orange-500 hover:scale-105 transition-all duration-300 flex items-center" href="#">
      Services
     </a>
    </li>
    <li>
     <a class="px-2 py-1 text-sm hover:text-orange-500 hover:scale-105 transition-all duration-300 flex items-center" href="#">
      Contact
     </a>
    </li>
   </ul>
   <div class="hidden md:flex items-center gap-4">
    <button class="bg-black text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition-colors">
     Get Started
    </button>
   </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="bg-gray-100 text-gray-900 transition duration-300 ease-out hover:shadow-lg active:shadow-sm focus:ring-2 ring-blue-500 w-full mx-auto max-w-7xl sm:px-4 md:px-6 xl:px-12">
 <div class="flex justify-between items-center p-6">
  <div class="flex-shrink-0 font-bold flex items-center gap-2">
   <span>
    🚀
   </span>
   <span>
    AstroNav
   </span>
  </div>
  <button class="md:hidden p-2 rounded-lg hover:bg-gray-200 transition-colors">
   <span class="text-2xl">
    🍔
   </span>
  </button>
  <ul class="hidden md:flex md:gap-6 list-none items-center">
   <li>
    <a class="px-2 py-1 text-sm hover:text-orange-500 hover:scale-105 transition-all duration-300 flex items-center" href="#">
     Home
    </a>
   </li>
   <li>
    <a class="px-2 py-1 text-sm hover:text-orange-500 hover:scale-105 transition-all duration-300 flex items-center" href="#">
     Products
    </a>
   </li>
   <li>
    <a class="px-2 py-1 text-sm hover:text-orange-500 hover:scale-105 transition-all duration-300 flex items-center" href="#">
     Services
    </a>
   </li>
   <li>
    <a class="px-2 py-1 text-sm hover:text-orange-500 hover:scale-105 transition-all duration-300 flex items-center" href="#">
     Contact
    </a>
   </li>
  </ul>
  <div class="hidden md:flex items-center gap-4">
   <button class="bg-black text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition-colors">
    Get Started
   </button>
  </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.

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