Framework7 - Navbars

Description

In this chapter, let us study about navbar. It is a usually placed at top of a screen containing title of the page and navigation elements.

Navbar consists of three parts each of which may contain any HTML content, but it is suggested you use these in the way given below −

The following table demonstrates the use of navbar in detail −

S.No	Navbar Types & Description
1	Basic navbar A basic navbar can be created by using the navbar, navbar-inner, left, center and right classes.
2	Navbar with links To use links in left and right part of your navbar, just add <a> tag with class link.
3	Multiple links To use multiple links, just add few more <a class = "link"> to the part of your choice.
4	Links with text and icons The links can be provided with icons and texts by adding classes for icons and wrapping the link text with <span> element.
5	Links with only icons Navbar links can be provided with only icons by adding icon-only class to links.
6	Related app and view methods On initializing the View, framework7 allows you to use methods available for navbar.
7	Hide navbar automatically The navbar can be hidden/shown automatically for some Ajax loaded pages where navbar is not required.