Appbars

Usage

<div class="appbar">
    <div class="left">
        <span class="title">Appbar</span>
    </div>
</div>

Items placement

<div class="appbar">
    <div class="left">
        <span class="title">Left</span>
    </div>
    <div class="middle">
        <span class="title">Middle</span>
    </div>
    <div class="right">
        <span class="title">Right</span>
    </div>
</div>

Using Icons and Buttons

<div class="appbar">
    <div class="left">
        <span class="title">Title</span>
    </div>
    <div class="right">
        <a class="icon" href="#!">
            <i class="mdi mdi-thumb-up"></i>
        </a>
        <a class="btn text" href="#!">
            Button
        </a>
    </div>
</div>

Add a color

<div class="appbar primary">
    <div class="left">
        <span class="title">Appbar With color</span>
    </div>
    <div class="right">
        <a class="btn text" href="#!">
            Button
        </a>
    </div>
</div>

With an input

<div class="appbar elevation-1">
    <div class="left">
        <span class="title">Appbar With input</span>
    </div>
    <div class="right">
        <input type="text" class="appbar-input" placeholder="Search">
        <a class="btn text" href="#!">
            Button
        </a>
    </div>
</div>

Elevating the Appbar

Simply add the class elevating to the appbar element to make it elevate when scrolling.