🎯 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

1# Using npm
2npm install react-navbar-ks
3
4# Using yarn
5yarn add react-navbar-ks

💻 Usage

1import { NavBar } from 'react-navbar-ks';
2
3function App() {
4  const navItems = [
5    { name: 'Home', path: '/' },
6    { name: 'About', path: '/about' },
7    { name: 'Contact', path: '/contact' }
8  ];
9
10  const handleSearch = (query: string) => {
11    console.log('Searching for:', query);
12  };
13
14  return (
15    <NavBar 
16      items={navItems}
17      onSearch={handleSearch}
18    />
19  );
20}

🛠️ 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

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. 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