App Bar
Top app bars typically appear at the top of a page and may contain toolbars, tabs, and other components. A page can contain only one top app bar.
Usage
The top app bar is implemented in pure CSS, so writing the HTML is enough for it to take effect.
Color
A top app bar has no background color by default. You can set the background color for elements inside it, such as toolbars and tabs.
Related Reading
<div class="mdui-appbar">
<div class="mdui-toolbar mdui-color-theme">
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">menu</i>
</a>
<a href="javascript:;" class="mdui-typo-headline">MDUI</a>
<a href="javascript:;" class="mdui-typo-title">Title</a>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">refresh</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">more_vert</i>
</a>
</div>
</div><div class="mdui-appbar">
<div class="mdui-tab mdui-color-theme" mdui-tab>
<a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
<a href="#example3-tab2" class="mdui-ripple mdui-ripple-white">shopping</a>
<a href="#example3-tab3" class="mdui-ripple mdui-ripple-white">videos</a>
</div>
</div><div class="mdui-appbar">
<div class="mdui-toolbar mdui-color-theme">
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">menu</i>
</a>
<a href="javascript:;" class="mdui-typo-title">Title</a>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">refresh</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">more_vert</i>
</a>
</div>
<div class="mdui-tab mdui-color-theme" mdui-tab>
<a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
<a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">shopping</a>
<a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">videos</a>
</div>
</div><div class="mdui-appbar">
<div class="mdui-toolbar mdui-color-theme">
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">menu</i>
</a>
<a href="javascript:;" class="mdui-typo-title">Title</a>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">refresh</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">more_vert</i>
</a>
</div>
<div class="mdui-tab mdui-color-theme" mdui-tab>
<a href="#example6-tab1" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">phone</i>
<label>recents</label>
</a>
<a href="#example6-tab2" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">favorite</i>
<label>favorites</label>
</a>
<a href="#example6-tab3" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">perm_contact_calendar</i>
<label>nearby</label>
</a>
</div>
</div>Transparent background
You need to add the class .mdui-shadow-0 to remove the shadow from the top app bar.
<div class="mdui-appbar mdui-shadow-0">
<div class="mdui-toolbar">
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">menu</i>
</a>
<a href="javascript:;" class="mdui-typo-title">Title</a>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">refresh</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">more_vert</i>
</a>
</div>
</div>Fixed to top
Adding the class .mdui-appbar-fixed to <div class="mdui-appbar"></div> pins the top app bar to the top of the page so it does not scroll with the rest of the page content.
To prevent the top app bar from covering page content, you need to add a class to the body element to add padding-top to the body:
.mdui-appbar-with-toolbar: This class is required when the top app bar contains a toolbar..mdui-appbar-with-tab: This class is required when the top app bar contains tabs..mdui-appbar-with-tab-larger: This class is required when the top app bar contains tabs with both icons and text.
If the top app bar contains elements other than toolbars and tabs, you need to add the appropriate padding-top to the body yourself.
Auto-hide top app bar
Adding the class .mdui-appbar-scroll-hide to <div class="mdui-appbar"></div> hides the top app bar when you scroll down and shows it again when you scroll up.
If elements are dynamically generated, you need to call mdui.mutation() to initialize them.
<body class="mdui-appbar-with-toolbar">
<div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
<div class="mdui-toolbar">
......
</div>
</div>
</body>Auto-hide toolbar in top app bar
Adding the class .mdui-appbar-scroll-toolbar-hide to <div class="mdui-appbar"></div> hides the toolbar when you scroll down and shows it again when you scroll up if both a toolbar and tabs are present in the top app bar.
If elements are dynamically generated, you need to call mdui.mutation() to initialize them.
<body class="mdui-appbar-with-toolbar mdui-appbar-with-tab">
<div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
<div class="mdui-toolbar">
......
</div>
<div class="mdui-tab">
......
</div>
</div>
</body>CSS Classes
| Class Name | Description |
|---|---|
.mdui-appbar | Define a top app bar. |
.mdui-appbar-fixed | Fix the top app bar to the top of the page. |
.mdui-appbar-with-toolbar | This class should be added to the body when the top app bar contains a toolbar. |
.mdui-appbar-with-tab | This class should be added to the body when the top app bar contains tabs. |
.mdui-appbar-with-tab-larger | This class should be added to the body when the top app bar contains tabs with both icons and text. |
.mdui-appbar-scroll-hide | Hide the top app bar when scrolling down and show it when scrolling up. |
.mdui-appbar-scroll-toolbar-hide | Hide the toolbar when scrolling down and show it when scrolling up if both toolbar and tabs are present in the top app bar. |