Framework7 Navbars - Framework7

How the Navbars in Framework7 help in navigations?


Below chapter will give brief description about navbar. It is usually placed on top of the screen containing title of the page and navigation elements.

Navbar consists of 3 parts each of which may contain any HTML content, but it is recommended to use them as mentioned below:

  • Left: This is designed to place back link icons or single text link.
  • Center: This is used to display title of the page or tab links.
  • Right: This part can be used similar as left part.

Below table demonstrates the use of navbar:


Navbar Types & Description


Basic navbar
A basic navbar can be created by using the navbar, navbar-inner, left, center and right classes.


Navbar with links
To use links in left and right part of your navbar, just add <a> tag with class link.


Multiple links
To use multiple links, just add few more <a class="link"> to the part of your choice.


Links with text and icons
These links can be provided with icons and text by adding classes for icons and wrapping the link text with <span> element.


Links with only icons
Navbar links can be provided with only icons by adding icon-only class to links.


Related app and view methods
On initializing the View, framework7 allows you to use methods available for navbar.


Hide navbar automatically
Navbar can be hidden/shown automatically for some Ajax loaded pages where navbar is not required.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Framework7 Topics