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.

1. Clone this repo.

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

3. 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.