Menu

The Metro 4 provides any classes to create different cool menu, as horizontal, vertical, tool and others. All menus have a similar structure and are created using lists, list items and anchors. Menu is determined by the class applied to the root list.

Horizontal menu

To create horizontal menu add class .h-menu to list.


                    <ul class="h-menu">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Cart</a></li>
                    </ul>
                

Horizontal menu with dropdown


                    <ul class="h-menu">
                        <li><a href="#">Home</a></li>
                        <li>
                            <a href="#" class="dropdown-toggle">Products</a>
                            <ul class="d-menu" data-role="dropdown">
                                <li>
                                    <a href="#" class="dropdown-toggle">Windows</a>
                                    <ul class="d-menu" data-role="dropdown">
                                        <li><a href="#">Windows 10</a></li>
                                        <li><a href="#">Windows Server</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">MS-DOS</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Skype</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Office</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Cart</a></li>
                    </ul>
                

Horizontal menu with disabled hover effect


                    <ul class="h-menu no-hover">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Cart</a></li>
                    </ul>
                

Horizontal menu with class .large


                    <ul class="h-menu large">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Cart</a></li>
                    </ul>
                

Mega menu


                    <ul class="h-menu mega">
                        <li><a href="#">Home</a></li>
                        <li>
                            <a href="#" class="dropdown-toggle">Products</a>
                            <div class="mega-container p-2" data-role="dropdown">
                                <div class="row">
                                    <div class="cell-md-6">
                                        <h2 class="text-light">Metro 4</h2>
                                        <p>
                                            Is an open source toolkit for developing with ...
                                        </p>
                                    </div>
                                    <div class="cell-md-6">
                                        <h4>Begin with Metro 4</h4>
                                        <ul class="unstyled-list pl-0">
                                            <li><a href="#">Getting started</a></li>
                                            <li><a href="#">Base CSS</a></li>
                                            <li><a href="#">Components</a></li>
                                            <li><a href="#">Utilities</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="dropdown-toggle">Support</a>
                            <div class="mega-container" data-role="dropdown">
                                <ul class="h-menu">
                                    <li><a href="#">Blog</a></li>
                                    <li><a href="#">Forum</a></li>
                                    <li><a href="#">Github</a></li>
                                    <li><a href="#">Community</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">Cart</a></li>
                    </ul>
                

Vertical menu

The vertical menu is intended, first of all, to create sidebar menus of your site. To create vertical menu add class .v-menu to list.


                    <ul class="v-menu">
                        <li class="menu-title">General</li>
                        <li><a href="#"><span class="mif-home icon"></span> Home</a></li>
                        <li class="menu-title">Products</li>
                        <li><a href="#"><span class="mif-windows icon"></span> Windows</a></li>
                        <li><a href="#"><span class="mif-library icon"></span> Office 365</a></li>
                        <li><a href="#"><span class="mif-skype icon"></span> Skype</a></li>
                        <li class="menu-title">Support</li>
                        <li>
                            <a href="#" data-hotkey="Alt+F1">Community</a>
                            <ul class="v-menu" data-role="dropdown">
                                <li><a href="#">Blog</a></li>
                                <li><a href="#">Github</a></li>
                                <li><a href="#">Forum</a></li>
                                <li class="divider"></li>
                                <li 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>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-title">Shop</li>
                        <li><a href="#"><span class="mif-cart icon"></span> Cart</a></li>
                    </ul>
                

Tool menu

If you need to create cool compact tool menu, you can user class .t-menu.


                    <ul class="t-menu open">
                        <li><a href="#"><span class="mif-apps icon"></span></a></li>
                        <li><a href="#"><span class="mif-laptop icon"></span></a></li>
                        <li><a href="#"><span class="mif-bubbles icon"></span></a></li>
                        <li><a href="#"><span class="mif-bubble icon"></span></a></li>
                        <li><a href="#"><span class="mif-user icon"></span></a></li>
                    </ul>
                    <ul class="t-menu open compact">
                        <li><a href="#"><span class="mif-apps icon"></span></a></li>
                        <li><a href="#"><span class="mif-laptop icon"></span></a></li>
                        <li><a href="#"><span class="mif-bubbles icon"></span></a></li>
                        <li><a href="#"><span class="mif-bubble icon"></span></a></li>
                        <li><a href="#"><span class="mif-user icon"></span></a></li>
                    </ul>
                    <ul class="t-menu open horizontal">
                        <li><a href="#"><span class="mif-apps icon"></span></a></li>
                        <li><a href="#"><span class="mif-laptop icon"></span></a></li>
                        <li><a href="#"><span class="mif-bubbles icon"></span></a></li>
                        <li><a href="#"><span class="mif-bubble icon"></span></a></li>
                        <li><a href="#"><span class="mif-user icon"></span></a></li>
                    </ul>
                    <ul class="t-menu open horizontal compact">
                        <li><a href="#"><span class="mif-apps icon"></span></a></li>
                        <li><a href="#"><span class="mif-laptop icon"></span></a></li>
                        <li><a href="#"><span class="mif-bubbles icon"></span></a></li>
                        <li><a href="#"><span class="mif-bubble icon"></span></a></li>
                        <li><a href="#"><span class="mif-user icon"></span></a></li>
                    </ul>
                

Tools menu dropdown


                    <ul class="t-menu open">
                        <li><a href="#"><span class="icon mif-home"></span></a></li>
                        <li><a href="#" class="dropdown-toggle"><span class="icon mif-compass"></span></a>
                            <ul class="t-menu horizontal" data-role="dropdown">
                                <li><a href="#"><span class="icon mif-home"></span></a></li>
                                <li><a href="#" class="dropdown-toggle"><span class="icon mif-compass"></span></a>
                                    <ul class="t-menu" data-role="dropdown">
                                        <li><a href="#"><span class="icon mif-home"></span></a></li>
                                        <li><a href="#"><span class="icon mif-compass"></span></a></li>
                                        <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                                        <li><a href="#"><span class="icon mif-file-empty"></span></a></li>
                                    </ul>
                                </li>
                                <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                                <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                        <li><a href="#"><span class="icon mif-file-empty"></span></a></li>
                    </ul>

                    <ul class="t-menu horizontal compact open">
                        <li><a href="#"><span class="icon mif-home"></span></a></li>
                        <li><a href="#" class="dropdown-toggle"><span class="icon mif-compass"></span></a>
                            <ul class="t-menu compact" data-role="dropdown">
                                <li><a href="#"><span class="icon mif-home"></span></a></li>
                                <li><a href="#" class="dropdown-toggle"><span class="icon mif-compass"></span></a>
                                    <ul class="t-menu compact horizontal" data-role="dropdown">
                                        <li><a href="#"><span class="icon mif-home"></span></a></li>
                                        <li><a href="#"><span class="icon mif-compass"></span></a></li>
                                        <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                                        <li><a href="#"><span class="icon mif-file-empty"></span></a></li>
                                    </ul>
                                </li>
                                <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                                <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                        <li><a href="#"><span class="icon mif-file-empty"></span></a></li>
                    </ul>
                

Dropdown menu

With Metro 4 you can create dropdown menu simple and easy for any element.

To create dropdown menu:

  1. Create container with a position different from statics
  2. Add toggles with class .dropdown-toggle
  3. Add menu with class .d-menu and attribute data-role="dropdown"
  4. To display the menu up add class .drop-up to menu
  5. To display the menu left class .drop-left to menu
  6. To display the menu right add class .drop-right to menu
  7. To hide dropdown toggle marker add class .no-marker to toggle

                    <div class="pos-relative">
                        <button class="button dropdown-toggle">Menu toggle</button>
                        <ul class="d-menu" data-role="dropdown">
                            <li><a href="#">One</a></li>
                            <li><a href="#">Two</a></li>
                            <li><a href="#">Three</a></li>
                        </ul>
                    </div>
                    <div class="pos-relative">
                        <a class="button link dropdown-toggle">Menu toggle</a>
                        <ul class="d-menu" data-role="dropdown">
                            <li><a href="#">One</a></li>
                            <li><a href="#">Two</a></li>
                            <li><a href="#">Three</a></li>
                        </ul>
                    </div>
                    <div class="pos-relative">
                        <button class="button square dropdown-toggle">
                            <span class="mif-apps"></span>
                        </button>
                        <ul class="d-menu" data-role="dropdown">
                            <li><a href="#">One</a></li>
                            <li><a href="#">Two</a></li>
                            <li><a href="#">Three</a></li>
                        </ul>
                    </div>
                

Context menu

Context menu is a kind of drop-down menu, with reduced size of menu items.


                    <a class="button" id="context_toggle">Open context menu</a>
                    <ul class="d-menu context" data-role="dropdown" data-toggle-element="#context_toggle">
                        <li><a href="#"><span class="mif-user icon"></span> Profile</a></li>
                        <li><a href="#">Calendar</a></li>
                        <li><a href="#">Photo</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><span class="mif-target icon"></span> Location</a></li>
                    </ul>
                

Hotkeys

All menus supports hotkey binding to elements. To bind hotkey add attribute data-hotkey="*" to menu a element.


                    <ul class="d-menu open pos-static" style="width: 220px">
                        <li><a href="#" data-hotkey="Alt+Q" onclick="alert('Alt+Q')">Test Alt+Q</a></li>
                        <li><a href="#" data-hotkey="Alt+W" onclick="alert('Alt+W')">Test Alt+W</a></li>
                        <li><a href="#" data-hotkey="Ctrl+F1" onclick="alert('Ctrl+F1')">Test Ctrl+F1</a></li>
                    </ul>
                

Menu color

If you need a menu of a certain color, it's nothing easier, add classes for background color and tex color to your menu.


                    <ul class="h-menu bg-red fg-white">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Cart</a></li>
                    </ul>

                    <ul class="d-menu open pos-static bg-green fg-white">
                        <li><a href="#"><span class="mif-user icon"></span> Profile</a></li>
                        <li><a href="#">Calendar</a></li>
                        <li><a href="#">Photo</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><span class="mif-target icon"></span> Location</a></li>
                    </ul>

                    <ul class="t-menu horizontal open bg-cyan fg-white">
                        <li><a href="#"><span class="icon mif-home"></span></a></li>
                        <li><a href="#" class="dropdown-toggle"><span class="icon mif-compass"></span></a>
                            <ul class="t-menu bg-pink fg-white" data-role="dropdown">
                                <li><a href="#"><span class="icon mif-home"></span></a></li>
                                <li><a href="#" class="dropdown-toggle"><span class="icon mif-compass"></span></a>
                                    <ul class="t-menu horizontal bg-brown fg-white" data-role="dropdown">
                                        <li><a href="#"><span class="icon mif-home"></span></a></li>
                                        <li><a href="#"><span class="icon mif-compass"></span></a></li>
                                        <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                                        <li><a href="#"><span class="icon mif-file-empty"></span></a></li>
                                    </ul>
                                </li>
                                <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                                <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                        <li><a href="#"><span class="icon mif-file-empty"></span></a></li>
                    </ul>