Paradise-mud-navbar NPM

Paradise Mud Navbar 🌟

A customizable React component for creating a responsive navbar. Perfect for adding a sleek, modern navigation bar to your React applications with options for logos, links, and buttons.

Features 🚀

Customizable Logos: Display text or image logos.
Flexible Links: Add navigation links with custom click handlers.
Interactive Buttons: Include buttons with actions.
Responsive Design: Mobile-friendly with a hamburger menu for small screens.
Customizable Positions: Control the positioning of logos, links, and buttons.

Installation 🛠️

To install paradise-mud-navbar, use npm or yarn:

npm install paradise-mud-navbar
# or
yarn add paradise-mud-navbar

Usage 🖥️

Import the ParadiseMudNavbar component into your React application and configure it as needed:

import React from 'react';
import ParadiseMudNavbar from 'paradise-mud-navbar';
import "paradise-mud-navbar/src/components/ParadiseMudNavbar.css";

const App = () => {
  return (
    <ParadiseMudNavbar
      navbarLogos={['https://example.com/logo.png']}
      navbarLinks={[
        { link: '/', title: 'Home' },
        { link: '/about', title: 'About' },
      ]}
      navbarButtons={[
        { title: 'Click Me', onClick: () => alert('Button clicked!') },
      ]}
    />
  );
};

export default App;

Props 🛠️

`navbarClassNames` (optional) 🎨

Type: array of strings
Description: Custom CSS class names for styling the navbar. This allows you to apply additional styles or override default styles.

`navbarLogos` (optional) 🖼️

Type: array of strings
Description: List of logo URLs or texts. If an item is a URL, it will be rendered as an image; otherwise, it will be rendered as text.

`navbarLinks` (optional) 🔗

Type: array of objects
Description: List of navigation links to display in the navbar.
- link (string): The URL for the link.
- title (string): The text to display for the link.
- className (string, optional): Additional CSS classes for styling the link.
- onClick (function, optional): Click event handler for the link.

`navbarButtons` (optional) 🔘

Type: array of objects
Description: List of buttons to be displayed in the navbar.
- title (string): The text to display on the button.
- onClick (function): Click event handler for the button.

`logoPosition` (optional) 📍

Type: string
Default: "left"
Description: Position of the logo in the navbar. Can be "left", "center", or "right".

`linksPosition` (optional) 📍

Type: string
Default: "center"
Description: Position of the navigation links in the navbar. Can be "left", "center", or "right".

`buttonsPosition` (optional) 📍

Type: string
Default: "right"
Description: Position of the buttons in the navbar. Can be "left", "center", or "right".

CSS Customization 🎨

To customize the appearance of the navbar, create a ParadiseMudNavbar.css file in your project and override the default styles. Here are some CSS classes you can target: