”;
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 −
-
Left − It is designed to place back link icons or single text link.
-
Center − It is used to display title of the page or tab links.
-
Right − This part is similar to the left part.
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. |
”;