Appbar usage

The appbar is used to hold a couple elements. The navigation drawer, title, action buttons and "more menu" can all be shown in the appbar. Note some of the code and styling is still open to change. For example the search button doesn't work at the moment

There are a couple attributes specific names to make everything work. The id #nav-button is needed to make the navigation drawer open and close. Also the class .nav-more is used to open te menu more list. The class .appbar-menu-more is used to detect wetter or not a click is performed outside the menu more. When there is a click outside the menu more it will close.

<header class="appbar">
  <i class="material-icons trigger" data-trigger="drawer">menu</i>

  <div class="appbar-title">

  <i class="material-icons">search</i>

  <div class="search-input">
    <div class="single-input">
      <input type="search" name="search" id="search">
      <label for="search">Search</label>

  <i class="material-icons">mail <div class="badge">2</div></i>

  <i class="material-icons trigger" data-trigger="appbar-menu">more_vert</i>

  <nav class="menu appbar-menu" id="appbar-menu">
    <a href="#">Example</a>
    <a href="#">Example</a>


If you would like to use badges in the appbar you can by simply adding the .badge class to a div inside an action.

<a href="#"><i class="material-icons">mail</i> <div class="badge">2</div></a>


Variable Options Result
$appbar-background Color / variable Changes the background color
$appbar-text Color / variable Changes the font color
$appbar-title Color / variable Changes the font color of a title / header