@meveo-org/mv-menu

mv-menu

MvMenu is a Meveo menu component (based on lit-element) that provides menu with sub menus.

Features

• Arbitrary sub-menu levels
• Shortcut text
• Written in vanila javascript
• Can render custom dropdown and notification

Dependencies

• mv-click-away

Quick Start

To experiment with the MvMenu component.

• Clone this repo.

• Serve the project from the root directory with some http server (best served with meveo itself)

• Sample menu usage is included in the demo.js

The mv-menu has 3 type variants:

default, dropdown, and notification 

Sample usage

• dropdown

<mv-menu type="dropdown">      
   <mv-menu text="">
       <span slot="title">                            // title slot
           <div class="dropdown">
               <div class="avatar">ma</div>
               <div class="title">meveo.admin</div>
               <mv-fa icon="caret-down"></mv-fa>
           </div>
       </span>
       <mv-menu 
           text="Profile Setttings"
           @submenu-clicked="${this.clickLink}"       // links and actions to be dispatched when menu items are clicked
       ></mv-menu>  
       <mv-menu text="Log Out"></mv-menu>
   </mv-menu>
</mv-menu>

• notification

<mv-menu type="notification">
   <mv-menu text="" .showFooter="${false}">  // hide notification's footer
       <span slot="title">                                       // title, footer, body slots
           <mv-fa icon="bell"></mv-fa>
       </span>
       <span slot="footer">
           <span class="footer">View all</span>
       </span>
   </mv-menu>
</mv-menu>

You can also check this demo

Acknowledgements

• MvMenu is inspired from MenuLitElement and Flex menu.