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 layout 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>

CSS Variables

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

Note that commented variables are not specified by default and their values is what they fallback to in this case.

: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-color-rgb: var(--f7-bars-bg-color-rgb);
  --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: 64px;
  --f7-appbar-inner-padding-left: 16px;
  --f7-appbar-inner-padding-right: 16px;
}

Examples

<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">arrowshape_turn_up_left_fill</i>
        </a>
        <a href="#" class="button button-small display-flex margin-left-half">
          <i class="f7-icons">arrowshape_turn_up_right_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="panel panel-left panel-cover panel-init">
    <div class="block">
      <p>Panel left content</p>
    </div>
  </div>
  <div class="view view-main view-init">
    <div class="page">
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="title">Appbar</div>
        </div>
      </div>
      <div class="page-content">
        <div class="block block-strong">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed sagittis dui. Fusce nulla massa,
            scelerisque vitae auctor in, luctus in ipsum. Sed eu lectus vel magna malesuada lacinia. Ut at vestibulum
            sem. In semper, arcu pulvinar volutpat fermentum, felis magna fringilla felis, nec volutpat nisi nunc quis
            ante. Fusce elementum egestas tortor ut porta. Vestibulum ante ipsum primis in faucibus orci luctus et
            ultrices posuere cubilia Curae; Duis id commodo elit. Sed massa dui, laoreet a orci sed, egestas vehicula
            tellus. Nulla pulvinar ornare justo sed finibus. Aliquam hendrerit dui at nulla eleifend, quis feugiat
            enim aliquam. Nulla facilisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus.</p>
        </div>
      </div>
    </div>
  </div>
</div>