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 class="app-bar-expand-md" data-role="appbar">
<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 special media expand classes:
app-bar-expand-fs
,
app-bar-expand-sm
,
app-bar-expand-md
,
app-bar-expand-lg
,
app-bar-expand-xl
or
app-bar-expand-xxl
.
More information about media break points you can read in this article.
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>