Container Element

MUI provides a simple .mui-appbar container that automatically adjusts its height based on the viewport dimensions:

  • 48px (phone landscape)
  • 56px (phone portrait)
  • 64px (default)
<div class="mui-appbar">
  <!-- content -->
View in new tab »


MUI also provides several helper classes that are useful for sharing the appbar height with other elements:

  • .mui--appbar-height (sets height property)
  • .mui--appbar-min-height (sets min-height property)
  • .mui--appbar-line-height (sets line-height property)

The height helpers are especially useful for centering appbar content:

Left Side Right Side
<div class="mui-appbar">
  <table width="100%">
    <tr style="vertical-align:middle;">
      <td class="mui--appbar-height">Left Side</td>
      <td class="mui--appbar-height" align="right">Right Side</td>
View in new tab »
« Previous Next »