Appbar

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 -->
</div>

Helpers

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:

<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>
    </tr>
  </table>
</div>