App bar

Create top application menu with Metro 4 app bar component.

About

Create top application menu with Metro 4 app bar component. To create it you must create container (ex: <div> or <nav>) with role data-role="appbar". Add brand identification, static item or/and menu. The app bar is displayed in fixed top position.


                    <div data-role="appbar" data-expand-point="md">
                        <a href="#" class="brand no-hover">
                            <span style="width: 55px;" class="p-2 border bd-dark border-radius">
                                m<sup>4</sup>
                            </span>
                        </a>

                        <ul class="app-bar-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="#">Windows 10</a></li>
                                    <li><a href="#">Office 365</a></li>
                                    <li class="divider bg-lightGray"></li>
                                    <li><a href="#">Skype</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Contacts</a></li>
                        </ul>
                    </div>
                

By default appbar displayed in collapsed mode. To expand it you must use attribute data-expand-point and special media expand identifiers: fs, sm, md, lg, xl or xxl. More information about media break points you can read in this article.


                    <div data-role="appbar" data-expand-point="md">
                    ...
                    </div>
                

If you need to persistent expanded appbar, use attribute data-expand="true"


                    <div data-role="appbar" data-expand="true">
                    ...
                    </div>
                

Brand

To create brand you can use element with class .brand. If you no need hover for brand element, use class .no-hover for brand element.


                    <div data-role="appbar">
                        <a href="#" class="brand">Brand name</a>
                        <a href="#" class="brand no-hover">Brand name</a>
                    </div>
                

Static items

To create static items you must create element with class .brand or .app-bar-item.


                    <div data-role="appbar">
                        ...
                        <a href="#" class="app-bar-item">Always</a>
                        <a href="#" class="app-bar-item">Show</a>

                        <ul class="app-bar-menu">
                        ...
                        </ul>
                    </div>
                

Menu

To create app bar menu element you must create list with class .app-bar-menu. Each menu item must contains list item and anchor inside in a list item.


                    <div data-role="appbar">
                        <ul class="app-bar-menu">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Products</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Contacts</a></li>
                        </ul>
                    </div>
                

Dropdown

To create dropped down sub menu you must create menu with class .d-menu and with role data-role="dropdown". How to create menu read in this article. For static item you must use container with class .app-bar-container


                    <div data-role="appbar">
                        ...
                        <div class="app-bar-container">
                            <a href="#" class="app-bar-item dropdown-toggle">Always</a>
                            <ul class="d-menu" data-role="dropdown">
                                <li><a href="#">Windows 10</a></li>
                                <li>
                                    <a href="#" class="dropdown-toggle">Office 365</a>
                                    <ul class="d-menu" data-role="dropdown">
                                        <li><a href="#">Windows 10</a></li>
                                        <li><a href="#">Office 365</a></li>
                                        <li class="divider bg-lightGray"></li>
                                        <li><a href="#">Skype</a></li>
                                    </ul>
                                </li>
                                <li class="divider bg-lightGray"></li>
                                <li><a href="#">Skype</a></li>
                            </ul>
                        </div>
                        ...
                        <ul class="app-bar-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="#">Windows 10</a></li>
                                    <li><a href="#">Office 365</a></li>
                                    <li class="divider bg-lightGray"></li>
                                    <li><a href="#">Skype</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Contacts</a></li>
                        </ul>
                    </div>
                

Hamburger

Hamburger button will be created automatically. You no need create it manually.

IE11 and Edge bugs

IE11 and Edge can be show .app-bar-menu incorrect. To fix it, you must add next style to page head. Unfortunately this bug is old, but still not corrected and is associated with the display of lists.


                    <style>
                        .app-bar-menu li {
                            list-style: none!important;
                        }
                    </style>