Dynamic Navbar is supported only in iOS Theme
One of the iOS awesome features is the dynamic navigation bar (navbar). Navbar's elements will slide and fade during pages transition and swipe back when dynamic navbar is enabled.
It works only with Through-type layout
It should be enabled during View initialization by passing dynamicNavbar: true parameter
Dynamic Navbar layout is the same as for usual Navbar, the only difference is that you can add additional classes to Navbar parts (Left, Center, Right) to tell which type of transition effect you want on this part.
By default (if there is no additional classes) each Navbar part has "Fade" transition effect
If you add "sliding" class to any of Navbar parts then it will have "Sliding" effect
For better look you should to keep identic transition type for the same Navbar parts through different pages
<!-- Navbar on index page -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link">Home Left</a>
</div>
<div class="center">Home</div>
<div class="right">
<a href="#" class="link">Home Right</a>
</div>
</div>
</div>
<!-- Navbar on about page -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link">About Left</a>
</div>
<div class="center">About</div>
<div class="right">
<a href="#" class="link">About Right</a>
</div>
</div>
</div>Sliding transitions should be used wisely because they should reflect app's navigation chain
<!-- Navbar on index page -->
<div class="navbar">
<div class="navbar-inner">
<!-- Left part doesn't related to other pages, let's fade it out -->
<div class="left">
<a href="#" class="link">Home Left</a>
</div>
<!-- Center and Right parts reflect page title and page links, let's slide them -->
<div class="center sliding">Home</div>
<div class="right sliding">
<a href="about.html" class="link">About</a>
</div>
</div>
</div>
<!-- Navbar on about page -->
<div class="navbar">
<div class="navbar-inner">
<!-- Now, Left and Center parts reflect page title and page links, let's slide them -->
<div class="left sliding">
<a href="#" class="link back">Home</a>
</div>
<div class="center sliding">About</div>
<!-- Right part doesn't related to other pages -->
<div class="right">
<a href="#" class="link icon-only">
<i class="icon icon-bars"></i>
</a>
</div>
</div>
</div>If you use default back-links (icon + "Back" word) you can enable additional animation for these links to have more iOS 7 look. To make it work you need to add animateNavBackIcon: true parameter on App initialization and to have link with "back" class and icon in Left Navbar part. Nothing different in layout, here is example:
Dynamic navbar has the following events:
| Event | Target | Description |
|---|---|---|
| navbar:beforeinit | Navbar Inner element <div class="navbar-inner"> | Event will be triggered when Framework7 just inserts new navbar inner to DOM |
| navbar:init | Navbar Inner element <div class="navbar-inner"> | Event will be triggered after Framework7 initialize navbar |
| navbar:reinit | Navbar Inner element <div class="navbar-inner"> | This event will be triggered when cached navbar inner becomes visible. It is only applicaple for Inline Pages (DOM cached pages) |
| navbar:beforeremove | Navbar Inner element <div class="navbar-inner"> | Event will be triggered right before navbar inner will be removed from DOM. This event could be very useful if you need to detach some events / destroy some plugins to free memory |
Each event data containes useful information with navbar elements and Page Data of related page. For example
$$(document).on('navbar:init', function (e) {
var navbar = e.detail.navbar;
var page = e.detail.page
});Now, in the example above we have initialized Navbar elements in navbar variable and related Page Data in page variable. Lets look on properties of navbar object:
| Navbar Properties | |
|---|---|
| navbar.navbarContainer | Link to parent Navbar HTMLElement |
| navbar.navbarInnerContainer | Link to target Navbar Inner HTMLElement |