React-responsive-navbar-ks NPM

🎯 React Responsive NavBar KS

A modern, animated responsive navigation bar component built with React, TypeScript, and Tailwind CSS.

✨ Features

📱 Responsive mobile-first design with hamburger menu
🔍 Integrated animated search functionality
🎨 Beautiful glass-morphism UI design
🎯 TypeScript support for type safety
🌊 Smooth transitions and hover effects
⚡ Optimized performance with React.memo
🎪 Interactive state management
📦 Easy to integrate and customize

🚀 Installation

# Using npm
npm install react-navbar-ks

# Using yarn
yarn add react-navbar-ks

💻 Usage

import { NavBar } from 'react-navbar-ks';

function App() {
  const navItems = [
    { name: 'Home', path: '/' },
    { name: 'About', path: '/about' },
    { name: 'Contact', path: '/contact' }
  ];

  const handleSearch = (query: string) => {
    console.log('Searching for:', query);
  };

  return (
    <NavBar 
      items={navItems}
      onSearch={handleSearch}
    />
  );
}

🛠️ Props

Prop	Type	Default	Description
`items`	`Array<{ name: string, path: string }>`	`[]`	Navigation items to display
`onSearch`	`(query: string) => void`	`undefined`	Callback when search changes
`className`	`string`	`''`	Additional CSS classes

🎨 Features in Detail

Responsive Design

Mobile-first approach
Hamburger menu for mobile views
Smooth transitions between mobile/desktop layouts
Optimized touch targets for mobile

Search Functionality

Animated search input
Expandable search bar
Real-time search feedback
Debounced search handling

UI/UX

Glass-morphism effects
Hover and active states
Focus states for accessibility
Clean, modern design

🔧 Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

📦 Dependencies

React 16.8+ (for Hooks)
Tailwind CSS 3.0+
TypeScript 4.0+

🤝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📝 License

Distributed under the MIT License. See LICENSE for more information.

🙏 Credits

React - UI library
Tailwind CSS - For styling
TypeScript - Type safety
Lucide Icons - For beautiful icons
React Router - For navigation handling
React Memo - For performance optimization

Special Thanks

Special thanks to all the open-source contributors and the amazing developer community for their continuous support and inspiration.

🐛 Bug Reports

Found a bug? Please create an issue with: 1. Bug description 2. Steps to reproduce 3. Expected vs actual behavior 4. Browser and OS details

📞 Support

GitHub Issues: Create an issue
Email: ksankarkumar34@gmail.com
LinkedIn: @sankarkumarkathirvel

Made with ❤️ by Sankarkumar Kathirvel

1.0.2

6 months ago

1.0.1

6 months ago

1.0.0

6 months ago