Navbar layout

Navbar layout is pretty simple and self explaining:

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">Left</div>
        <div class="center">Center</div>
        <div class="right">Right</div>
    </div>
</div>

So if you use plain text in Center part it will have ellipsis (...) on the end when cuted. But you need to take care about it if you have some custom elements there.

Navbar with links

To add links in Left or Right part you just need to add the plain <a> tag with additional link class:

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Left Link</a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link">Right Link</a>
        </div>
    </div>
</div>     

Additional link class is not required but recommended, because it adds required link sizes and "active" opacity effect

Multiple links

Nothing extraordinary. Just add more <a class="link" to the required part:

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Left 1</a>
            <a href="#" class="link">Left 2</a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link">Right 1</a>
        </div>
    </div>
</div>

Links with icons + text

Here comes a little difference. In this case we need to wrap link's text with <span> element. It is required for correct spacing between icon and "word", and for animation:

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">
                <i class="icon icon-back"></i>
                <span>Back</span>
            </a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link">
                <i class="icon icon-bars"></i>
                <span>Menu</span>
            </a>
        </div>
    </div>
</div>

Links with icons only

If need links with icons and without text we need to additional "icon-only" class to links. With this class link will have fixed 44x44 px size so we can't miss it with finger:

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link icon-only">
                <i class="icon icon-back"></i>
            </a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link icon-only">
                <i class="icon icon-bars"></i>
            </a>
        </div>
    </div>
</div>    

Related App and View methods

If we have initialized View we can use following methods available for Navbar:

myApp.hideNavbar(navbar, isAnimated)	Hide specified toolbar. navbar - HTMLElement or string (with CSS Selector) of required navbar. Required. isAnimated - Boolean - Default: true
myApp.showNavbar(navbar, isAnimated)	Show specified toolbar. navbar - HTMLElement or string (with CSS Selector) of required navbar. Required. isAnimated - Boolean - Default: true
view.hideNavbar(isAnimated)	Hide navbar in this View isAnimated - Boolean - Default: true
view.showNavbar(isAnimated)	Show navbar in this View isAnimated - Boolean - Default: true
myApp.sizeNavbars(viewContainer)	viewContainer - CSS Selector string or HTMLElement. URL of page to load Call this method to recalculate positional styles for Navbar in selected View. For example: myApp.sizeNavbars('.view-main') It could be useful after you change some of Navbar elements dynamically. Used only by iOS theme

And the following example:

var myApp = new Framework7();
 
var $ = Framework7.$;
 
var mainView = myApp.addView('.view-main');
 
$('.hide-navbar').on('click', function () {
    mainView.hideNavbar();
});
 
$('.show-navbar').on('click', function () {
    mainView.showNavbar();
});

Hide Navbar automatically

Framework7 allows you to hide/show navbar automatically for some Ajax loaded pages where you may not need Navbar. It is useful only when you use through-type layout.

To make it work all you need is to add "no-navbar" class to loaded page (<div class="page no-navbar">) and put there empty Navbar:

<!-- Empty Navbar -->
<div class="navbar">
  <div class="navbar-inner">
  </div>
</div>          
 
<!-- Page has additional "no-navbar" class -->
<div data-page="about" class="page no-navbar">
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="back button">Go Back</a></p>
      ...
    </div>
  </div>
</div>