Tronic247 Material

Appbars

Edit this page

Usage

<div class="appbar">
    <div class="appbar-content">
        <a class="appbar-brand" href="#!">Appbar</a>
    </div>
</div>  

Items placement

menu
Tronic247 Material

<header class="appbar">
   <div class="appbar-content">
     <a class="btn appbar-trigger icon center-ripple">
       <span class="material-icons">menu</span>
     </a>
     <div class="appbar-brand">Tronic247 Material</div>
     <ul class="appbar-items appbar-item--start">
       <a class="btn" href="#">Link 1</a>
     </ul>
     <ul class="appbar-items appbar-item--end">
       <a class="btn" href="#">Link 4</a>
     </ul>
   </div>
</header>

With Search form

menu
Tronic247 Material
    search

<header class="appbar">
    <div class="appbar-content">
        <a class="btn appbar-trigger icon center-ripple">
            <span class="material-icons">menu</span>
        </a>
        <div class="appbar-brand">Tronic247 Material</div>
        <ul class="appbar-items appbar-item--start">
            <form class="input-form">
                <input class="input input-with-icon" placeholder="Search" id="search" />
                <span class="search-icon material-icons">search</span>
            </form>
        </ul>
    </div>
</header>

Colors

<div class="appbar">
    <div class="appbar-content">
        <a class="appbar-brand" href="#!">Appbar</a>
    </div>
</div>
<div class="appbar secondary">
    <div class="appbar-content">
        <a class="appbar-brand" href="#!">Appbar</a>
    </div>
</div>
<div class="appbar success">
    <div class="appbar-content">
        <a class="appbar-brand" href="#!">Appbar</a>
    </div>
</div>
<div class="appbar danger">
    <div class="appbar-content">
        <a class="appbar-brand" href="#!">Appbar</a>
    </div>
</div>
<div class="appbar dark">
    <div class="appbar-content">
        <a class="appbar-brand" href="#!">Appbar</a>
    </div>
</div>
<div class="appbar transparent">
    <div class="appbar-content">
        <a class="appbar-brand" href="#!">Appbar</a>
    </div>
</div>