1.0.2 • Published 11 months ago
react-megamenu-responsive v1.0.2
React Mega Menu
It's a mega menu component on React. It comes with features like fullwidth, call to action button, image, and responsible for mobile/tablet device.
Features:
- fullwidth mode
- CTA button
- image
- responsible for mobile/tablet
Table of contents
Install
npm i react-megamenu
Attention
ReactMegaMenu component must use between BrowserRouter tag
Usage
simple mega menu
import { BrowserRouter } from 'react-router-dom';
import ReactMegaMenu from 'react-megamenu-responsive';
import type { MenuType } from 'react-megamenu-responsive';
const menu: MenuType[] = [
{
id: "1",
title: "Phone",
href: "#",
items: [
{ id: "1", title: "Phone 9", href: "#" },
{ id: "2", title: "Phone 10", href: "#" },
{ id: "3", title: "Phone 11", href: "#" },
],
description: "my phones are very useful",
},
{
id: "2",
title: "Monitor",
href: "#",
items: [
{ id: "1", title: "Monitor m1", href: "#" },
{ id: "2", title: "Monitor m2", href: "#" },
]
},
{
id: "3",
title: "Laptop",
href: "#",
items: [
{ id: "1", title: "Laptop l1", href: "#" },
{ id: "2", title: "Laptop l2", href: "#" },
{ id: "3", title: "Laptop l3", href: "#" },
]
},
]
export default function Example() {
return (
<BrowserRouter >
<ReactMegaMenu menus={menu} />
</BrowserRouter>
)
}API
ReactMegaMenu
The component accepts the following props:
| Name | Type | Description |
|---|---|---|
direction | lrt | rtl | inherit | Direction used to describe direction of menu. |
menus | array | Used to describe menus. Must be either an array of objects describing a menu. (This field is required) |
options | object | Options used to describe mega menu. |
Menu Options
| Name | Type | Default | Description |
|---|---|---|---|
color | object | User provided colors to customized menu. | |
fullWidth | boolean | false | Possible values:true: Mega menu is fullwidth.false: Mega menu is not fullwidth. Example |
image | object | User provided image to customized menu. Example | |
CTA | object | User provided CTA button to customized menu. Example |
CSS Classes
These class names are useful for styling with CSS. They are applied to the component.
| Name | Description |
|---|---|
rmm-megamenu-main | Styles applied to the mega menu |
rmm-megamenu-menu | Styles applied to the menu |
rmm-megamenu-cta | Styles applied to the CTA section |
rmm-megamenu-cta__title | Styles applied to the CTA title |
rmm-megamenu-cta__des | Styles applied to the CTA description |
rmm-megamenu-img | Styles applied to the image section |
rmm-megamenu-img__title | Styles applied to the image title |
rmm-menu-main | Styles applied to the each of the menus |
rmm-menu-head | Styles applied to options of the header of menu |
rmm-menu-head__icon | Styles applied to the header icon |
rmm-menu-head__link | Styles applied to the header link |
rmm-menu-head__title | Styles applied to the header title |
rmm-menu-head__des | Styles applied to the header description |
rmm-menu-ul | Styles applied to the items |
rmm-menu-item | Styles applied to the each of the items |
rmm-menu-item__icon | Styles applied to the item icon |
rmm-menu-item__link | Styles applied to the item link |
rmm-menu-item__title | Styles applied to the item title |
Item Icon
On each item and menu object, you have the ability to choose icon to your liking with the 'icon' property. Example:
const menu: MenuType[] = [
{
id: "1",
title: "Phone",
href: "#",
icon: <svg>...</svg>,
items: [
{
id: "1", title: "Phone 9", href: "#", icon: <svg>...</svg>,
},
{
id: "2", title: "Phone 10", href: "#", icon: <svg>...</svg>,
},
{
id: "3", title: "Phone 11", href: "#", icon: <svg>...</svg>,
},
],
description: "my phones are very useful",
}
]Options
Change default options
const defaultOptions: OptionType = {
color: {
backgroundColor: "#fff",
borderColor: "#ddd",
headTitle: "#2563eb",
description: "#2563eb",
itemTitle: "#6b7280",
},
fullWidth: false,
}