<metro-menu background-color="MetroColor.Dark" color="MetroColor.White">
<metro-menu-item text="Home" />
<metro-menu-item>Products</metro-menu-item>
<metro-menu-item text="Support">Products</metro-menu-item>
<metro-menu-item text="Cart" />
</metro-menu>
<metro-menu no-hover="true">
<metro-menu-item text="Home" />
<metro-menu-item>Products</metro-menu-item>
<metro-menu-item text="Support">Products</metro-menu-item>
<metro-menu-item text="Cart" />
</metro-menu>
<metro-menu large="true">
<metro-menu-item text="Home" />
<metro-menu-item>Products</metro-menu-item>
<metro-menu-item text="Support">Products</metro-menu-item>
<metro-menu-item text="Cart" />
</metro-menu>
<metro-menu>
<metro-menu-item text="Home" />
<metro-menu-item text="Products" type="DropDown">
<metro-menu type="Dropdown">
<metro-menu-item type="DropDown" text="Windows">
<metro-menu type="Dropdown">
<metro-menu-item text="Windows 10" />
<metro-menu-item text="Windows Server" />
<metro-menu-item type="Divider"/>
<metro-menu-item text="MS-DOS"/>
</metro-menu>
</metro-menu-item>
<metro-menu-item text="Skype" />
<metro-menu-item type="Divider"/>
<metro-menu-item text="Office" />
</metro-menu>
</metro-menu-item>
<metro-menu-item text="Support">Products</metro-menu-item>
<metro-menu-item text="Cart" />
</metro-menu>
<metro-menu >
<metro-menu-item text="Home" />
<metro-menu-item text="Products" type="Mega" mega-container-cls="p-2">
<div class="row">
<div class="cell-md-6">
<h2 class="text-light">Metro UI</h2>
<p>
Is an open source toolkit for developing with ...
</p>
</div>
<div class="cell-md-6">
<h4>Begin with Metro UI</h4>
<ul class="unstyled-list pl-0">
<li><a href="#">Getting started</a></li>
<li><a href="#">Form CSS</a></li>
<li><a href="#">Components</a></li>
<li><a href="#">Utilities</a></li>
</ul>
</div>
</div>
</metro-menu-item>
<metro-menu-item text="Support" type="Mega">
<metro-menu>
<metro-menu-item text="Blog" />
<metro-menu-item text="Forum" />
<metro-menu-item text="Github" />
<metro-menu-item text="Community" />
</metro-menu>
</metro-menu-item>
<metro-menu-item text="Cart" />
</metro-menu>
<metro-menu type="Vertical">
<metro-menu-item text="General" type="Title" />
<metro-menu-item text="Home" icon="mif-home" />
<metro-menu-item text="Products" type="Title" />
<metro-menu-item text="Windows" icon="mif-windows" />
<metro-menu-item text="Office 365" icon="mif-library " />
<metro-menu-item text="Skype" icon="mif-skype" />
<metro-menu-item text="Support" type="Title" />
<metro-menu-item text="Community" hot-key="Alt+F1" type="DropDown">
<metro-menu type="Vertical" dropdown="true">
<metro-menu-item text="Blog" />
<metro-menu-item text="Github" />
<metro-menu-item text="Forum" />
<metro-menu-item type="Divider" />
<metro-menu-item type="Custom" class="p-2 bg-light">
<button class="button square primary"><span class="mif-target"></span></button>
<button class="button square success"><span class="mif-apps"></span></button>
<button class="button square alert"><span class="mif-file-code"></span></button>
<button class="button square warning"><span class="mif-download"></span></button>
</metro-menu-item>
</metro-menu>
</metro-menu-item>
<metro-menu-item text="Shop" type="Title" />
<metro-menu-item text="Cart" icon="mif-cart" />
</metro-menu>
<metro-menu type="Tool" open="true" class="mr-1">
<metro-menu-item icon="mif-apps" />
<metro-menu-item icon="mif-laptop" type="DropDown">
<metro-menu type="Tool" dropdown="true">
<metro-menu-item icon="mif-bubbles" />
<metro-menu-item icon="mif-bubble" />
<metro-menu-item icon="mif-user" />
</metro-menu>
</metro-menu-item>
<metro-menu-item icon="mif-bubbles" />
<metro-menu-item icon="mif-bubble" />
<metro-menu-item icon="mif-user" />
</metro-menu>
<metro-menu type="Tool" open="true" horizontal="true" class="mr-1">
<metro-menu-item icon="mif-apps" />
<metro-menu-item icon="mif-laptop" type="DropDown">
<metro-menu type="Tool" dropdown="true">
<metro-menu-item icon="mif-bubbles" />
<metro-menu-item icon="mif-bubble" />
<metro-menu-item icon="mif-user" />
</metro-menu>
</metro-menu-item>
<metro-menu-item icon="mif-bubbles" />
<metro-menu-item icon="mif-bubble" />
<metro-menu-item icon="mif-user" />
</metro-menu>
<metro-menu type="Tool" open="true" compact="true" class="mr-1">
<metro-menu-item icon="mif-apps" />
<metro-menu-item icon="mif-laptop" type="DropDown">
<metro-menu type="Tool" dropdown="true">
<metro-menu-item icon="mif-bubbles" />
<metro-menu-item icon="mif-bubble" />
<metro-menu-item icon="mif-user" />
</metro-menu>
</metro-menu-item>
<metro-menu-item icon="mif-bubbles" />
<metro-menu-item icon="mif-bubble" />
<metro-menu-item icon="mif-user" />
</metro-menu>
<metro-menu type="Context" id="contextMenu">
<metro-menu-item icon="mif-user" text="Profile"/>
<metro-menu-item text="Calendar"/>
<metro-menu-item text="Photo"/>
<metro-menu-item type="Divider"/>
<metro-menu-item icon="mif-target" text="Location"/>
</metro-menu>
$('#contextMenuArea').on('contextmenu',(e)=>{
e.preventDefault();
var menu = $('#contextMenu');
var area = $('#contextMenuArea');
var x = e.clientX;
var y = e.clientY;
var offset = area.offset();
menu.css('left', x - offset.left);
menu.css('top', y- offset.top);
menu.show();
});