🧭 React MUI Reusable Navigation Menu

Welcome to the React MUI Reusable Navigation Menu! This versatile navigation component is designed to fit seamlessly into any React application, providing a dynamic and customizable menu system with support for nested items and various interactions. Whether you’re building a complex dashboard or a sleek website, this menu is your go-to solution for a responsive and intuitive navigation experience.

🚀 Features

• Flexible Layout: Easily switch between horizontal (row) and vertical (column) layouts to match your design needs.
• Custom Actions: Use onClick, href, or custom render functions to define how each menu item behaves.
• Nested Menus: Supports multiple levels of nested sub-links for intricate menu structures.
• Icon Customization: Customize the icon shown in the menu with a default or your own custom icon.
• Hover Effects: Optionally show icons on hover to enhance the user interaction.

📦 Installation

Add the component to your project using npm or yarn:

npm install react-mui-reusable-nav-menu
# or
yarn add react-mui-reusable-nav-menu

🛠️ Usage

Here's a basic example to get you started:

import React from 'react';
import MuiNavMenu from 'react-mui-reusable-nav-menu';
import { ArrowRight } from '@mui/icons-material';

const App = () => {
  return (
    <MuiNavMenu
      NavLink={NavLinks} // Your navigation links data
      direction="column" // Change to "row" for horizontal layout
      showIconOnHover={true} // Show icons on hover
      Icon={ArrowRight} // Default icon, can be customized
    />
  );
};

export default App;

📄 Component Overview

MuiNavMenu

The MuiNavMenu component renders a responsive navigation menu with support for various configurations.

Props

• NavLink: NavLink[]
  Array of menu link objects. Each object can include:

  • href: string - URL for navigation.
  • name: string - Text to display for the menu item.
  • subLinks: NavLink[] - Array of nested menu items.
  • onClick: () => void - Function to call on item click.
  • render: () => JSX.Element - Custom component to render instead of default item.

• direction: 'row' | 'column' (Default: 'column')
  Determines the direction of the menu layout.

• showIconOnHover: boolean (Default: false)
  Whether to show the icon only on hover.

• Icon: React.ElementType (Default: ArrowRight)
  Icon component to use for indicating sub-links.

NavLink Interface

Define your menu items using the NavLink interface:

export interface NavLink {
    href?: string;
    name?: string;
    subLinks?: NavLink[]; // Support for nested links
    onClick?: () => void;
    render?: () => JSX.Element; // Render custom component
}

🗂️ Example Data

Here's an example of how you can structure your navigation links:

export const NavLinks: NavLink[] = [
    {
        name: 'Electronics',
        onClick: () => { alert("YEEE HAAAAWWWWW!!!!"); },
        subLinks: [
            {
                name: 'Smartphones',
                href: '/electronics/smartphones',
                subLinks: [
                    {
                        name: 'Android Phones',
                        href: '/electronics/smartphones/android',
                        render: () => (<h1>this is custom item</h1>)
                    },
                    {
                        name: 'iPhones',
                        href: '/electronics/smartphones/iphones',
                    },
                    {
                        name: 'VodaPhone',
                        href: '/electronics/smartphones/vodaPhone',
                        subLinks: [
                            {
                                name: 'VodaPhone One',
                                href: '/electronics/smartphones/vodaPhoneone',
                            },
                            {
                                name: 'VodaPhone Two',
                                href: '/electronics/smartphones/vodaPhonetwo',
                            }
                        ]
                    },
                ]
            },
            {
                name: 'Laptops',
                href: '/electronics/laptops',
                subLinks: [
                    {
                        name: 'Gaming Laptops',
                        href: '/electronics/laptops/gaming',
                    },
                    {
                        name: 'Ultrabooks',
                        href: '/electronics/laptops/ultrabooks',
                    }
                ]
            }
        ]
    },
    // More items...
];

🎨 Customization

Style the menu using Material-UI's styling system or your preferred CSS method. The component is designed to be easily customized to fit your app's theme.

import { styled } from '@mui/material/styles';

const CustomNavMenu = styled(MuiNavMenu)(({ theme }) => ({
  // Custom styles
}));

// Use CustomNavMenu instead of MuiNavMenu

🙌 Contributing

We welcome contributions! If you have improvements or suggestions, please fork the repo and submit a pull request.

Happy coding! 🚀