Menucomponents

Horizontal Menu

Default

<nav class="horizontal-menu">
    <ul>
        <li><a href="#">Products</a></li>
        <li><a href="#">Download</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Buy Now</a></li>
    </ul>
</nav>

Compact

<nav class="horizontal-menu compact">
    ...
</nav>

Horizontal menu with dropdown

<nav class="horizontal-menu">
    <ul>
        <li>
            <a class="dropdown-toggle" href="#">Products</a>
            <ul class="dropdown-menu" data-role="dropdown">
                <li><a href="#">Windows 8</a></li>
                <li><a href="#">Skype</a></li>
                <li><a href="#">Internet Explorer</a></li>
                <li><a href="#">Office</a></li>
            </ul>
        </li>
        ...
    </ul>
</nav>

Vertical Menu

Default

<nav class="vertical-menu">
    <ul>
        <li class="title">Discover</li>
        <li><a href="#">Windows</a></li>
        <li><a href="#">Office</a></li>
        <li><a href="#">Surface</a></li>
        <li><a href="#">Windows Phone</a></li>
    </ul>
</nav>

Compact

<nav class="vertical-menu compact">
    ...
</nav>

Dropdown Menu

Toggleable, contextual menu for displaying lists of links. Made interactive with the metro-dropdown.js JavaScript plugin.

<ul class="dropdown-menu" data-role="dropdown">
    <li class="menu-title">This is a title</li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li class="menu-title">This is another title</li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li class="disabled"><a href="#">Disabled link</a></li>
    <li class="divider"></li>
    <li class="checked"><a href="#">Checked link</a></li>
	<li class="unchecked"><a href="#">Unchecked link</a></li>
</ul>

<ul class="dropdown-menu" data-role="dropdown">...</ul>
<ul class="dropdown-menu inverse" data-role="dropdown">...</ul>
<ul class="dropdown-menu dark" data-role="dropdown">...</ul>
<ul class="dropdown-menu shadow" data-role="dropdown">...</ul>

Dropdowns position

<ul class="dropdown-menu" data-role="dropdown">
    ...
</ul>

<ul class="dropdown-menu drop-left" data-role="dropdown">
    ...
</ul>

<ul class="dropdown-menu drop-up" data-role="dropdown">
    ...
</ul>

Dropdown without javascript

You can use dropdown without javascript. For activating this feature add attribute data-show='hover' to dropdown menu.

<ul class="dropdown-menu" data-show="hover">
    ...
</ul>

Dropdown with javascript

You must add metro-dropdown.js to page.

Auto

Add attribute data-role='dropdown' and data-effect='...' to dropdown menu. You can set next values for effect: 'fade', 'slide' or 'none'

<ul class="dropdown-menu" data-role="dropdown" data-effect='fade'>
    ...
</ul>

Manual

$("#menu").dropdown();
    or
$("#menu").dropdown({
    effect: 'fade'
});