overlay-nav-react

overlay-nav-react is a lightweight and customizable React component for creating overlay navigation menus with a hamburger icon that opens and closes the menu. It is designed to provide a smooth and responsive navigation experience for your web application. You can easily integrate it into your React project and customize it to fit your design and branding needs.

Installation

You can install overlay-nav-react using npm or yarn:

npm install overlay-nav-react

# or

yarn add overlay-nav-react

For more details, visit the package on npm: overlay-nav-react on npm

Usage

Here's how you can use overlay-nav-react in your React application:

<import React from 'react';
import OverlayNav from 'overlay-nav-react';

const App = () => {
  return (
    <div>
      {/* Your other content */}
      <OverlayNav
        logoSrc="https://i.pinimg.com/originals/c5/07/c2/c507c28cfe9ca6eb06a594a2a11e80e7.png"
        links={[
          { text: 'Home', url: '/home' },
          { text: 'Products', url: '/products' },
          { text: 'Contact', url: '/contact' },
          { text: 'About', url: '/about' },
        ]}
      />
    </div>
  );
}

export default App;

Props

overlay-nav-react accepts the following props:

• logoSrc (string): The URL of your logo image.
• links (array of objects): An array of navigation links, where each link is an object with two properties: text (string) and url (string).
• backgroundColor (string, optional): The background color of the overlay navigation menu (default is 'rgb(255, 245, 245)').
• iconColor (string, optional): The color of the hamburger icon and other icons (default is '#000').
• mobileBackgroundColor (string, optional): The background color of the overlay navigation menu for mobile devices (default is '#fff').

Author

• Username: saad662
• Email: [email protected]

License

This package is licensed under the ISC License.

Issues and Contributions

If you encounter any issues or would like to contribute to the development of overlay-nav-react, please open an issue on GitHub or submit a pull request. Your feedback and contributions are highly appreciated.