🌈 Simple-Navs - Modern React Navbar Component

A fully customizable, responsive, and animated navigation bar for React applications

✨ Features

• 🚀 Fully responsive - Works on all device sizes with hamburger menu
• 🎨 Customizable - Choose colors, gradients, or use predefined themes
• 🔒 Sticky scrolling - Optional sticky navbar with smooth transitions
• 💫 Beautiful animations - Smooth hover effects and mobile menu transitions
• ♿ Accessible - Keyboard navigation and ARIA labels
• 🛠 TypeScript Ready - Full type definitions included

📦 Installation

npm install simple-navs styled-components framer-motion

 **🎨 Customization Options
🔳 Variant Types**

// Predefined variants
<NavBar variant="light" />    // Light theme
<NavBar variant="dark" />     // Dark theme
<NavBar variant="transparent" /> // Transparent with blur

// Custom colors
<NavBar variant={{ background: "#4a00e0", textColor: "#fff" }} />

// Gradient background
<NavBar variant={{ 
  background: { gradient: "linear-gradient(45deg, #ff8a00, #e52e71)" },
  textColor: "#fff"
}} />

**🎯 Basic Usage**

import React from 'react';
import logo from './logo.png';
import { NavBar } from 'simple-navs';

function App() {
  return (
    <div>
      <NavBar
        variant={{ 
          background: { gradient: "linear-gradient(to right, #8e2de2, #4a00e0)" },
          textColor: "#fff"
        }}
        logo={<img src={logo} alt="Logo" style={{ height: 32 }} />}
        items={[
          { label: "Home", href: "/" },
          { label: "About", href: "/about" },
          { label: "Contact", href: "/contact" },
        ]}
      />
    </div>
  );
}

**📱 Mobile Experience**
Auto-switches to hamburger menu on mobile

Smooth slide-in animation

Accessible touch targets

Backdrop blur effect