Navbars & Toolbars Layout

Before we add Navbars and Toolbar to our App we need to decide which type of their layout we will use.

Framework7 allows you to be very flexible with it and there are 3 different types of Navbar/Toolbar layout which defines where to put them on your page/view

"Static" Layout

Static layout is the probably most rarely used layout type. In this case Navbar and Toolbar are just parts of the scrollable page content and each page has its own Navbar and Toolbar:

<body>
  ...
  <div class="views">
    <div class="view view-main">
      <div class="pages">
        <div data-page="index" class="page">
          <div class="page-content">
            
            <!-- Top Navbar-->
            <div class="navbar">
              <div class="navbar-inner">
                <div class="center">Awesome App</div>
              </div>
            </div>
            <!-- /End of Top Navbar-->
            
            <p>Other content goes here</p>
            ...
            
            <!-- Bottom Toolbar-->
            <div class="toolbar">
              <div class="toolbar-inner">
                Hello
              </div>
            </div>          
            <!-- /End of Bottom Toolbar-->
            
          </div>
        </div>
      </div>
    </div>
  </div>
  ...
</body>

"Fixed" Layout

In Fixed layout each page also has its own navbar and toolbar but they are always visible on screen, so they not depend on page scroll:

<body>
  ...
  <div class="views">
    <div class="view view-main">
      <div class="pages">
        <!-- Now we need additional "navbar-fixed" and "toolbar-fixed" classes on Page -->
        <div data-page="index" class="page navbar-fixed toolbar-fixed">
            
          <!-- Top Navbar-->
          <div class="navbar">
            <div class="navbar-inner">
              <div class="center">Awesome App</div>
            </div>
          </div>
          <!-- /End of Top Navbar-->
 
          <div class="page-content">
            <p>Other content goes here</p>
            ...
          </div>
            
          <!-- Bottom Toolbar-->
          <div class="toolbar">
            <div class="toolbar-inner">
              Hello
            </div>
          </div>          
          <!-- /End of Bottom Toolbar-->
            
        </div>
      </div>
    </div>
  </div>
  ...
</body>

As you may see the difference from Static layout is that:

  • Navbar and Toolbar are now child elements of Page (<div class="page">)

  • Each page has additional "navbar-fixed" (for fixed Navbar) and "toolbar-fixed" (for fixed Toolbar) classes.

Note, that if you want to use Fixed layout for every page within single View, you can just add "navbar-fixed" and "toolbar-fixed" to parent Pages (<div class="pages">) instead of adding them to every single page.

"Through" Layout

This type of layout is only supported by iOS theme

This one is the most interesting and widely used layout type - when Navbar and Toolbar stay the same through all pages within single View. With such layout you can use cool Dynamic Navbar (don't forget to enable it on View initialization)

<body>
  ...
  <div class="views">
    <div class="view view-main">
            
      <!-- Top Navbar-->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="center">Awesome App</div>
        </div>
      </div>
      <!-- /End of Top Navbar-->          
            
      <!-- Now we need additional "navbar-through" and "toolbar-through" classes on Pages -->
      <div class="pages navbar-through toolbar-through">
        <div data-page="index" class="page">
          <div class="page-content">
            <p>Other content goes here</p>
            ...
          </div>
        </div>
      </div>
            
      <!-- Bottom Toolbar-->
      <div class="toolbar">
        <div class="toolbar-inner">
          Hello
        </div>
      </div>          
      <!-- /End of Bottom Toolbar-->
            
    </div>
  </div>
  ...
</body>

As you may see the difference from Static and Fixed layout are:

  • Navbar and Toolbar are now child elements of View (<div class="view">)

  • View with "through" Navbar and Toolbar has additional "navbar-through" (for through-type Navbar) and "toolbar-through" (for through-type Toolbar) classes.

Mixed Layouts

As you guess you can different layout types for different Views, like "Fixed" layout in one View and "Through" in other one. But you can also mix these layouts within single View. For example, you may have "Through" Navbar and Fixed Toolbar:

<body>
  ...
  <div class="views">
    <div class="view view-main">
            
      <!-- Top Navbar-->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="center">Awesome App</div>
        </div>
      </div>
      <!-- /End of Top Navbar-->          
            
      <!-- Now we need additional "navbar-through" and "toolbar-fixed" classes on Pages -->
      <div class="pages navbar-through toolbar-fixed">
        <div data-page="index" class="page">
          <div class="page-content">
            <p>Other content goes here</p>
            ...
          </div>
 
          <!-- Bottom Toolbar-->
          <div class="toolbar">
            <div class="toolbar-inner">
              Hello
            </div>
          </div>          
          <!-- /End of Bottom Toolbar-->
 
        </div>
      </div>
    </div>
  </div>
  ...
</body>

No Navbar/Toolbar

And of course if you don't need Navbar or Toolbar or both you may just not include them, and don't add appropriate classes ("navbar-fixed", "navbar-through", "toolbar-fixed", "toolbar-through") to page/pages/view.

Cheat sheet

So as you may see all these layout types are pretty easy to understand, all their difference is in additional classes on parent elements and different nesting level. Here is cheat sheet

Static

.view
  .pages
    .page
      .page-content
        .navbar
        // other page content
        .toolbar

Fixed

.view
  .pages.navbar-fixed.toolbar-fixed
    .page
      .navbar
      .page-content
      .toolbar

Through

.view
  .navbar
  .pages.navbar-through.toolbar-through
    .page
      .page-content
  .toolbar