The Ultimate React Multilevel Menu

URMM is a responsive menu react component. It's designed to be customizable and user-friendly.

- User-friendly simple and elegant
- Customizable to be suited to your needs
- RTL-Support to support different languages
- Multi-level to go as deep as you want

Pros

1. URMM is fully customizable thanks to different props
2. URMM supports multi-level menus
3. URMM is easy to implement

Demo

Documentation is here

Install

``sh
npm install --save ultimate-react-multilevel-menu
`

or

`sh
yarn add ultimate-react-multilevel-menu
`

Stylesheets

Make sure to include shipped CSS in your application to apply the correct styling to all components

`tsx
{
/ The following line can be included in your src/index.js or App.js file /
}
import 'ultimate-react-multilevel-menu/dist/esm/index.css'
`

Minimum Working Set Up

`tsx
import {
Navbar,
Collapse,
Item,
Items,
Logo
} from 'ultimate-react-multilevel-menu'

;
Logo

Home


Turbine



Introduction

Pricing


`

Componnents

$3

The Navbar component is the container of all other components and you can change the color scheme by using the predefined CSS classes or your custom CSS classes

#### Props

| Name | Type | Default | Description |
| --------- | -------------- | ------- | --------------------- |
| dir | "rtl" \| "ltr" | "ltr" | Menu direction |
| className | "string" | "" | CSS class for nav tag |

$3

The Collapse component is the container of the Nav component and it's responsible for making the menu responsive and elegant on small screens

#### Props

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |

$3

The Nav component is a container of Item and Items components, in fact, the Collapse component uses the Nav component to wrap Item and Items components under the hood.
in case you don't want the collapse toggle button you can use it directly instead.

#### Props

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |

$3

The Logo component is the container of your logo which can be an image or simple text

#### Props

| Name | Type | Default | Description |
| --------- | ----------------- | ------- | --------------------------------- |
| href | "string" | "" | Logo url link |
| as | React.ElementType | a | The component that link render as |
| className | "string" | "" | CSS class for container div tag |

$3

The Item component is a single link

#### Props

| Name | Type | Default | Description |
| --------- | ----------------- | ------- | --------------------------------- |
| href | "string" | "" | Item url link |
| as | React.ElementType | a | The component that link render as |
| className | "string" | "" | CSS class for container li tag |

$3

The Items component is a link and a container for other Items or Item components

#### Props

| Name | Type | Default | Description |
| --------- | ----------------- | ------- | --------------------------------- |
| href | "string" | "" | Url link for it self |
| as | React.ElementType | a | The component that link render as |
| className | "string" | "" | CSS class for container ul tag |

$3

Email: moizadloo@gmail.com`