React Curved Navigator 🌙

A beautiful, animated, and fully customizable curved navigation menu component for React applications.

✨ Features

• Smooth Animations – Fluid and elegant indicator transitions between items.
• Fully Customizable – Easily change colors, backgrounds, and icons.
• Compound Component API – Clean and readable usage with nested components (Menu.Item, Menu.Icon, Menu.Title).
• TypeScript Support – Built with TypeScript for a more robust development experience.
• Lightweight – No extra heavy dependencies.

📦 Installation

Install the package using npm or yarn:

npm install react-curved-navigatore

or

yarn add react-curved-navigatore

🚀 Usage

• Import the Menu component and its corresponding CSS file. You can use any icon library, such as react-icons.

import React from "react";
import { Menu } from "react-curved-navigatore";
// Import the styles
import "react-curved-navigatore/dist/menu.css";

import { IoHome, IoPerson, IoSettings, IoMail } from "react-icons/io5";

function App() {
  return (
    <div className="App">
      {/* Your page content goes here */}

      <Menu>
        <Menu.Item>
          <Menu.Icon>
            <IoHome size={24} />
          </Menu.Icon>
          <Menu.Title>Home</Menu.Title>
        </Menu.Item>

        <Menu.Item>
          <Menu.Icon>
            <IoPerson size={24} />
          </Menu.Icon>
          <Menu.Title>Profile</Menu.Title>
        </Menu.Item>

        <Menu.Item>
          <Menu.Icon>
            <IoMail size={24} />
          </Menu.Icon>
          <Menu.Title>Messages</Menu.Title>
        </Menu.Item>

        <Menu.Item>
          <Menu.Icon>
            <IoSettings size={24} />
          </Menu.Icon>
          <Menu.Title>Settings</Menu.Title>
        </Menu.Item>
      </Menu>
    </div>
  );
}

export default App;

🎨 Customization

You can fully customize the look and feel of the curved navigator by passing props to the Menu component.

Available Props

| Prop | Type | Default | Description | | --------------------- | ------ | --------- | --------------------------------------------------------------- | | menuBackgroundColor | string | #636363 | Background color of the navigation bar | | activeColor | string | #29fd53 | Background color of the active item indicator | | activeIconColor | string | #ffffff | Icon color of the active item | | titleColor | string | #ffffff | Text color of the active item's title | | bodyBackgroundColor | string | #ffffff | Background color of the page (used to create the curved cutout) |

Example

<Menu
  menuBackgroundColor="#2d3748"
  activeColor="#4299e1"
  activeIconColor="#ffffff"
  titleColor="#ffffff"
  bodyBackgroundColor="#f7fafc"
>
  <Menu.Item>
    <Menu.Icon>
      <IoHome size={24} />
    </Menu.Icon>
    <Menu.Title>Home</Menu.Title>
  </Menu.Item>

  <Menu.Item>
    <Menu.Icon>
      <IoPerson size={24} />
    </Menu.Icon>
    <Menu.Title>Profile</Menu.Title>
  </Menu.Item>
</Menu>

📸 Examples

Here are a few example styles for the curved navigator:

🔹 Default Style

<Menu>
  <Menu.Item>
    <Menu.Icon>
      <IoHome size={24} />
    </Menu.Icon>
    <Menu.Title>Home</Menu.Title>
  </Menu.Item>
</Menu>

Dark Theme

<Menu
  menuBackgroundColor="#1a202c"
  activeColor="#48bb78"
  activeIconColor="#ffffff"
  titleColor="#e2e8f0"
  bodyBackgroundColor="#2d3748"
>
  {/* Menu Items... */}
</Menu>

Blue Theme

<Menu
  menuBackgroundColor="#2b6cb0"
  activeColor="#63b3ed"
  activeIconColor="#ffffff"
  titleColor="#edf2f7"
  bodyBackgroundColor="#ebf8ff"
>
  {/* Menu Items... */}
</Menu>

🤝 Contributing

Contributions, issues, and feature requests are always welcome! 💡

If you’d like to contribute:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/your-feature-name

3. Make your changes and commit them:

   git commit -m "Add: your detailed message here"
      ```

4. Push to the branch: bash git push origin feature/your-feature-name
5. Open a Pull Request. 🎉