React-morph-menu NPM

React + Vite

React Morph Menu

react-morph-menu is a customizable navigation menu for React applications. This package provides an elegant and interactive menu indicator with dynamic behavior based on user interactions.

Demo Video

Watch the demo video showcasing how the react-morph-menu works:

Click on the image or here to watch the demo video.

Installation

Install the package using npm or yarn:

npm install react-morph-menu

yarn add react-morph-menu

Usage

Import the MorphMenu component into your React project:

import MorphMenu from "react-morph-menu/dist/MorphMenu";

const items = ["Home", "Profile", "Message", "Setting", "Photos"];

function App() {
  return (
    <MorphMenu
      indicatorShape={"circle"} // Customize the shape of the indicator
      items={items} // Array of menu items
    />
  );
}

export default App;

Props

Prop Name	Type Description
`indicatorShape`	`string` Shape of the indicator. See the table below for possible values.
`items`	`array of strings` Array of menu item names to display.

Items Options

The items input is necessary .

Indicator Shape Options

The indicatorShape prop determines the shape of the menu indicator. Possible values are: The indicatorShape input is necessary .

Value	Description
`circle`	Displays the indicator as a circle.
`circle-in-item`	Displays the indicator as a circle inside the active item.
`triangle`	Displays the indicator as a triangle.
`rectangle`	Displays the indicator as a rectangle.
`rectangle-in-item`	Displays the indicator as a rectangle inside the active item.

Example

Here is a simple example using the MorphMenu component:

import MorphMenu from "react-morph-menu/dist/MorphMenu";

const items = ["Dashboard", "Settings", "Notifications", "Help"];

function App() {
  return (
    <MorphMenu
      indicatorShape={"triangle"} // Set the indicator shape to triangle
      items={items} // Pass your menu items
    />
  );
}

export default App;

Optional Styles

Prop Name	Type	Description	Default Value
`indicatorWidth`	`number`	The width of the indicator in pixels.	each shape has its own width
`indicatorHeight`	`number`	The height of the indicator in pixels.	each shape has its own height
`indicatorTop`	`number`	The top position of the indicator, relative to the menu, in pixels.	each shape has its own top
`indicatorLeft`	`number`	The left position of the indicator, relative to the menu, in pixels.	each shape has its own left
`textColor`	`string`	The text color of the menu items. Accepts any valid CSS color value.	`#fff`
`indicatorBg`	`srting`	The background color of the indicator. Accepts any valid CSS color value.	`#01193e`
`indicatorBorderColor`	`string`	The border color of the indicator. Accepts any valid CSS color value.	This input is used in circle and rectangle shape in `#ffe4c4` color but it is better to choose its color according to the body background color