App bar

There are a couple of app bars that you can choose from. There is a default and fixed option.

The default app bar will scroll with the page. For the default app bar you only need to add the .app-bar class to an element.

The menu icon is used to trigger the menu. The data-trigger attribute must match the id of the navigation drawer.

The .app-bar-__title contains the title of the page. In the example a div is used but a h1 - h6 element is also supported.

In the .app-bar__actions section it is possible to add actions. Do note that you are responsible for hiding actions on mobile screens.

    
<header class="app-bar">
    <i class="material-icons icon" data-trigger="drawer">menu</i>

    <div class="app-bar__title">
        App bar
    </div>

    <div class="app-bar__actions">
        <i class="material-icons icon">person</i>
    </div>
</header>
    

    
<header class="app-bar app-bar--fixed">
    <i class="material-icons icon" data-trigger="drawer">menu</i>

    <div class="app-bar__title">
        App bar
    </div>

    <div class="app-bar__actions">
        <i class="material-icons icon">person</i>
    </div>
</header>