Appbar

• Appbar Layout
• CSS Variables
• Examples

Appbar is the main app bar with actions on top of the whole app. It is designed to be used in desktop apps with Aurora theme.

Appbar Layout

Appbar layour is pretty simple:

<div class="appbar">
  <div class="appbar-inner">
    <!-- ... Appbar content -->
  </div>
</div>

To be on top of the whole app it must be placed in App's root element before Panels and Views:

<div id="app">

  <!-- Appbar -->
  <div class="appbar">
    <div class="appbar-inner">
      <!-- ... Appbar content -->
    </div>
  </div>

  <!-- Panels -->
  <div class="panel panel-left panel-reveal">...</div>

  <!-- Views -->
  <div class="view view-main">...</div>
  ...

</div>

<span class="badge">32</span>

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  /*
  --f7-appbar-offset: var(--f7-appbar-height);
  --f7-appbar-extra-offset: 0px;
  --f7-appbar-bg-color: var(--f7-bars-bg-color);
  --f7-appbar-bg-image: var(--f7-bars-bg-image);
  --f7-appbar-border-color: var(--f7-bars-border-color);
  --f7-appbar-link-color: var(--f7-bars-link-color);
  --f7-appbar-text-color: var(--f7-bars-text-color);
  */
  --f7-appbar-shadow-image: none;
}
.ios {
  --f7-appbar-height: 44px;
  --f7-appbar-inner-padding-left: 8px;
  --f7-appbar-inner-padding-right: 8px;
}
.md {
  --f7-appbar-height: 48px;
  --f7-appbar-inner-padding-left: 16px;
  --f7-appbar-inner-padding-right: 16px;
}
.aurora {
  --f7-appbar-height: 38px;
  --f7-appbar-inner-padding-left: 15px;
  --f7-appbar-inner-padding-right: 15px;
}

<div id="#app">
  <!-- Appbar -->
  <div class="appbar">
    <div class="appbar-inner">
      <div class="left">
        <a href="#" class="button button-small panel-toggle display-flex" data-panel="left">
          <i class="f7-icons">bars</i>
        </a>
        <a href="#" class="button button-small display-flex margin-left-half">
          <i class="f7-icons">reply_fill</i>
        </a>
        <a href="#" class="button button-small display-flex margin-left-half">
          <i class="f7-icons">forward_fill</i>
        </a>
      </div>
      <div class="right">
        <div class="searchbar searchbar-inline">
          <div class="searchbar-input-wrap">
            <input type="text" placeholder="Search app">
            <i class="searchbar-icon"></i>
            <div class="input-clear-button"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Rest of the app -->
  <div class="view view-main view-init">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Badge</div>
        </div>
      </div>
      <div class="page-content">
        ...
      </div>
    </div>
  </div>
</div>