Language: ENCN

Dynamic Navbar

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

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

Default (Fade) transition

<!-- 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 transition

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>

Animate back-link icon

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:

Demos

Usual Sliding

With animateNavBackIcon

Dynamic Navbar Events

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