Navbar

Navbar is a fixed area at the top of a screen that contains Page title and navigation elements.

Navbar has 3 main parts: Left, Title 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.

  • Title 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 HTML Layout

Navbar layout is pretty simple and self explaining:

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">Left</div>
        <div class="title">Page Title</div>
        <div class="right">Right</div>
    </div>
</div>

Note that Navbar's Title element has lowest width priority, and when window screen will not fit all three elements Title part will be cut.

So if you use plain text in Title 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="title">Page Title</div>
        <div class="right">
            <a href="#" class="link">Right Link</a>
        </div>
    </div>
</div>

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="title">Page Title</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="title">Title</div>
        <div class="right">
            <a href="#" class="link">
                <i class="icon another-icon"></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 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="title">Title</div>
        <div class="right">
            <a href="#" class="link icon-only">
                <i class="icon another-icon"></i>
            </a>
        </div>
    </div>
</div>

Theme-specific Styling

In iOS theme Navbar has thin border on the bottom. To disable this border you need to add no-hairline class to navbar element:

<div class="navbar no-hairline">...</div>

In MD theme Navbar has shadow. To disable this shadow you need to add no-shadow class to navbar element:

<div class="navbar no-shadow">...</div>

Navbar Type

Now let's look where we can place our Navbar in DOM. There are several rules to place Navbar.

Static Navbar

Static navbar position is the probably most rarely used layout type. In this case Navbar is just part of the scrollable page content:

<div class="page">
  <!-- Scrollable page content -->
  <div class="page-content">
    <!-- Static navbar goes in the beginning inside of page-content -->
    <div class="navbar">...</div>
    ...

  </div>
</div>

Fixed Navbar

Fixed navbar is also part of the page but it is always visible on screen not depending on page scroll. In this case it must be a direct child of page and if page has also fixed toolbar then it must be BEFORE the toolbar:

<div class="page">
  <!-- Fixed navbar goes ALWAYS FIRST -->
  <div class="navbar">...</div>
  <!-- Fixed toolbar goes ALWAYS AFTER navbar -->
  <div class="toolbar">...</div>

  <!-- Scrollable page content -->
  <div class="page-content">
    ...
  </div>
</div>

Fixed Navbar must always be a direct child of a page and BEFORE the toolbar (if fixed toolbar is used on this page)

Common Navbar

If we need only one common navbar for all pages in View then it must be a direct child of this view and be BEFORE all pages in view:

<div class="view">
  <!-- View common navbar -->
  <div class="navbar">...</div>

  <!-- Pages -->
  <div class="page">...</div>
</div>

If we need only one common navbar / navbar for all views then it must be a direct child of Views element and be BEFORE all views.

<div class="views tabs">
  <!-- Views common navbar -->
  <div class="navbar">...</div>

  <div class="view tab tab-active" id="tab-1">...</div>
  <div class="view tab" id="tab-2">...</div>
  ...
</div>

Common Navbar must always be a direct child of Views/View and BEFORE the navbar (if same common toolbar is used)

Dynamic Navbar

Dynamic Navbar is supported only in iOS Theme

One of the iOS-theme awesome features is the dynamic navbar. Navbar's elements will slide and fade during pages transition and swipe back when dynamic navbar is enabled.

It is enabled by default when you use Fixed-positioned navbars, when Navbar is a direct child of the page.

If you want to disable it you need to pass dynamicNavbar: false for required View on its initialisation or in global app parameters for all views. For example:

// Disable globally
var app = new Framework7({
  view: {
    dynamicNavbar: false,
  },
});

// Disable only for view on its initialisation
var mainView = app.views.create('.view-main', {
  dynamicNavbar: false,
});

Dynamic Navbar Layout

Dynamic Navbar layout is the same as for usual Navbar, the only difference is that you can add additional classes to the Navbar parts (Left, Title, 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

  • If you add sliding class to the navbar-inner then all Navbar parts will have "Sliding" effect

  • For better look you should keep identic transition type for the same Navbar parts through different pages.

<!-- No additional classes, all elements will have "fade" effect on page transition -->
<div class="navbar">
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="link">Home Left</a>
    </div>
    <div class="title">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

<!-- Title and Left will have "sliding" effect on page transition -->
<div class="navbar">
  <div class="navbar-inner">
    <!-- Additional "sliding" class -->
    <div class="left sliding">
      <a href="#" class="link">Home Left</a>
    </div>
    <!-- Additional "sliding" class -->
    <div class="title sliding">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

<!-- All parts will have "sliding" effect on page transition -->
<div class="navbar">
  <!-- Additional "sliding" class -->
  <div class="navbar-inner sliding">
    <div class="left">
      <a href="#" class="link">Home Left</a>
    </div>
    <div class="title">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

Navbar App Methods

We can use following app methods available for Navbar:

app.navbar.hide(navbarEl, animate) Hide navbar
  • navbarEl - HTMLElement or string (with CSS Selector) of required navbar. Required.
  • animated - Boolean - wheter it should be hidden with animation or not. By default is true
app.navbar.show(navbarEl, isAnimated) Show navbar
  • navbarEl - HTMLElement or string (with CSS Selector) of required navbar. Required.
  • animated - Boolean - wheter it should be shown with animation or not. By default is true
app.navbar.size(navbarEl) Recalculate positional styles for Navbar elements. It could be useful after you change some of Navbar elements dynamically. This will have effect only in iOS theme
  • navbarEl - HTMLElement or string (with CSS Selector) of required navbar. Required.
app.navbar.getElByPage(pageEl) Get navbar HTML element by specified page element. Useful only when dynamic navbar is enabled. In this case it is out of the page container. This will have effect only in iOS theme
  • pageEl - HTMLElement or string (with CSS Selector) of page where to look for navbar. Required.

Navbar App Parameters

It is possible to control some default navbar behavior using global app parameters by passing navbar related parameters under navbar parameter:

Parameter Type Default Description
hideOnPageScroll boolean false Will hide Navbars on page scroll
showOnPageScrollEnd boolean true Set to true to show hidden Navbar when scrolling reaches end of the page
showOnPageScrollTop boolean true Set to false and hidden Navbar will not become visible when you scroll page to top everytime. They will become visible only at the most top scroll position, in the beginning of the page
scrollTopOnTitleClick boolean true When enabled then every click on navbar's title element will scroll related page to the top
iosCenterTitle boolean true When enabled then it will try to position title at the center in iOS theme. Sometime (with some custom design) it may not needed. This will have effect only in iOS theme

For example:

var app = new Framework7({
  navbar: {
    hideOnPageScroll: true,
    iosCenterTitle: false,
  },
});

Control Navbar With Page Classes

Framework7 allows you to hide/show Navbar on specific page or on specific page scoll by using additional classes.

If you want to hide navbar on page scroll on some specific page use additional classes on this page's <div class="page-content"> element:

  • hide-bars-on-scroll - to hide both Navbar and Toolbar on page scroll
  • hide-navbar-on-scroll - to hide Navbar on page scroll

To disable this behavior on specific pages you may use the following additional classes:

  • keep-bars-on-scroll - to keep Navbar and Toolbar on page scroll
  • keep-navbar-on-scroll - to keep Navbar on page scroll

For example:

<div class="page">
  <div class="navbar">
    ...
  </div>
  <!-- "hide-navbar-on-scroll" class to hide Navbar -->
  <div class="page-content hide-navbar-on-scroll">
    <div class="content-block">
      <p>Scroll page down</p>
      ...
    </div>
  </div>
</div>

If you have common single Navbar across all pages/views of your app you can hide/show Navbar automatically for some pages where you don't need it.

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

<!-- Page has additional "no-navbar" class -->
<div class="page no-navbar">
  <div class="page-content">
      ...
  </div>
</div>

Examples

Static Navbar

<div class="page">
  <div class="page-content">
    <!-- Static Navbar -->
    <div class="navbar">
      <div class="navbar-inner">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">Back</span>
          </a>
        </div>
        <div class="title">Static Navbar</div>
        <div class="right"></div>
      </div>
    </div>
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui, alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit similique!</p>
      ...
    </div>
  </div>
</div>

Fixed Navbar

<div class="page">
  <!-- Fixed/Dynamic Navbar -->
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Back</span>
        </a>
      </div>
      <div class="title">Fixed Navbar</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui, alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit similique!</p>
      ...
    </div>
  </div>
</div>

Navbar API

<div class="page">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Back</span>
        </a>
      </div>
      <div class="title">Navbar API</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p><a class="button button-raised hide-navbar">Hide Navbar</a></p>
      <p><a class="button button-raised show-navbar">Show Navbar</a></p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      ...
    </div>
  </div>
</div>
var app = new Framework7();

var $$ = Dom7;

$$('.hide-navbar').on('click', function () {
  app.navbar.hide('.navbar');
});
$$('.show-navbar').on('click', function () {
  app.navbar.show('.navbar');
});

Hide On Scroll

<div class="page">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Back</span>
        </a>
      </div>
      <div class="title">Hide On Scroll</div>
    </div>
  </div>
  <!-- Additional "hide-navbar-on-scroll" class to hide navbar on scroll automatically -->
  <div class="page-content hide-navbar-on-scroll">
    <div class="block">
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      ...
    </div>
  </div>
</div>