Menu

EMenu is a key feature in web development, it provides a handy means of presenting users with a list of choices. They appear at the position the element that generates them. Demo Here

Import

import EMenu from "@components/Elements/EMenu";

Usage

<EMenu color="primary" title="Drop down menu">
    <ul>
        <li>Action 1</li>
        <li>Action 2</li>
    </ul>
</EMenu>

controlled EMenu

You can control menu open state by using isOpen and onChange props.

const MenuExample = () => {
    const [isOpen, setIsOpen] = useState(true); 

    const onChangeHandler = (event, isMenuOpen) => {
        setIsOpen(isMenuOpen);
    };

    return (
        <EMenu
          color="primary" 
          title="Menu" 
          isOpen={isOpen}
          onChange={onChangeHandler}
        >
            <ul>
                <li>Action 1</li>
                <li>Action 2</li>
            </ul>
        </EMenu>
    );
};

export default MenuExample;

Props

For EMenu component, the following props are available:

Prop	Type	Default	Note
width	[String, Number]	-	Sets the component's width. Default unit is px.
height	[String, Number]	-	Sets the component's height. Default unit is px.
disabled	Boolean	false	Disables the menu.
rounded	Boolean	false	It creates a circular menu.
square	Boolean	false	Squares the corners of the menu.
isOpen	Boolean	false	Controls the open state of menu.
title	String	-	Adds a title to the EMenu element.
closeOnContentClick	Boolean	false	It closes the menu on content click.
className	String	-	Overrides or extends the component's wrapper styles.
contentClassName	String	-	Overrides or extends the component's content styles.
btnClassName	String	-	Overrides or extends the component's button styles.
size	String	"md"	The EMenu element has three predefined sizes: sm, md, lg.
customColor	String	-	A custom color in rgb format is applied to the menu (e.g, customColor="101, 89, 204").
position	String	"bottom"	The position prop allows the menu to be offset relative to the activator.The element can appear from the left, right,top or bottom edge of the parent.
color	String	"primary"	The given color is applied to the menu - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
arrowIcon	[Boolean, Object]	true	By using this prop you can hide/display the arrow icon of the menu title or you can change it. More Info about icons here.
icon	Object	-	By using icon prop the EMenu element will be visualized with an Icon.The icon appears before the default slot. More Info about icons here.
iconBtn	Object	-	By using iconBtn prop the EMenu element will be visualized in an Icon form. More Info about icons here.
variant	String	"fill"	The EMenu element can be represented in two ways: fill, alternate, outline ,text. alternate displays the menu with a light background, outline draws a border around an element and text displays the menu with only text and no background color.
animation	String	"expand"	The EMenu element can be animated in many ways. Defined animations here.
animationOrigin	String	"origin-center"	Defines the animation origin, values: Tailwind css classes for origin.

Callback Functions

The EMenu component contains following callback functions.

Function	Description
onChange	Callback fired when the open state is changed. function(event: React.SyntheticEvent, isOpen: Boolean) => void 👇 • event: The event source of the callback. • isOpen: open state value.

Children

The EMenu component provides a children props that enable you to customize the content.

Children	Description
✔️	Component's content.