Language: ENCN

Navbar

Navbar is a fixed (with Fixed and Through layout types) area at the top of a screen that contains Page title and navigation elements.

Navbar has 3 main parts: Left, Center and Right. Each part may contain any HTML content, but it is recommended to use them in the following way:

  • Left part is designed to be used with "back link", icons or with single text link.

  • Center part is used to display page title or tab links (buttons row/segmented controller).

  • Right part is for the same as the Left part.

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>

Note that Navbar's Center element has lowest width priority, and when window screen will not fit all three elements during window resize, then Center part will be cuted.

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) Hide specified toolbar.
navbar - HTMLElement or string (with CSS Selector) of required navbar. Required.
myApp.showNavbar(navbar) Show specified toolbar.
navbar - HTMLElement or string (with CSS Selector) of required navbar. Required.
view.hideNavbar() Hide navbar in this View
view.showNavbar() Show navbar in this View
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>

Dynamic Navbar Events

If you use Dynamic Navbar in your app then it will also have useful special events.