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 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>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.
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.
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>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.
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
.view
.pages
.page
.page-content
.navbar
// other page content
.toolbar.view
.pages.navbar-fixed.toolbar-fixed
.page
.navbar
.page-content
.toolbar.view
.navbar
.pages.navbar-through.toolbar-through
.page
.page-content
.toolbar