App bar
Create top application menu with Metro UI app bar component.
About
Create top application menu with Metro UI 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>