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

Usage

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

Props

For EMenu component, the following props are available:

Prop	Type	Default	Note
width	String	-	Sets the component's width.
height	String	-	Sets the component's height.
disabled	Boolean	false	Disables the menu.
rounded	Boolean	false	It creates a circular menu.
square	Boolean	false	Removes rounded corners of the element.
modelValue	Boolean	false	Controls the open state of menu.
contentClasses	String	-	Classes for default slot container.
closeOnContentClick	Boolean	false	It closes the menu on content click.
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

Slots

The EMenu component provides following slots that enable you to customize the content.

Slot	Description
text	Slot for the component's title.
default	The default Vue slot.