react-responsive-navbar-ks
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

🎯 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

  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

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


Made with ❤️ by Sankarkumar Kathirvel

Package Sidebar

Install

npm i react-responsive-navbar-ks

Weekly Downloads

3

Version

1.0.2

License

MIT

Unpacked Size

164 kB

Total Files

7

Last publish

Collaborators

  • ksankarkumar34