Framework7 Tutorial
Framework7 Components
Framework7 Styling
Framework7 Templates
Framework7 Fast Clicks
Framework7 Useful Resources
Selected Reading
Framework7 Components
- Framework7 - Lazy Load
- Framework7 - Notifications
- Framework7 - Message Bar
- Framework7 - Messages
- Framework7 - Infinite Scroll
- Framework7 - Refresh
- Framework7 - Calendar
- Framework7 - Picker
- Framework7 - Autocomplete
- Framework7 - Photo Browser
- Framework7 - Swiper Slider
- Framework7 - Tabs
- Framework7 - Forms
- Framework7 - Action Button
- Framework7 - Buttons
- Framework7 - Chips
- Framework7 - Cards
- Framework7 - Accordion
- Framework7 - List Views
- Framework7 - Progress Bar
- Framework7 - Preloaders
- Framework7 - Overlays
- Framework7 - Layout Grid
- Framework7 - Content Block
- Framework7 - Side Panels
- Framework7 - Status Bar
- Framework7 - Search Bar
- Framework7 - Toolbars
- Framework7 - Navbars
- Framework7 - Layouts
Framework7 Styling
Framework7 Templates
Framework7 Fast Clicks
Framework7 Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Framework7 - Navbars
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 −
Left − It is designed to place back pnk icons or single text pnk.
Center − It is used to display title of the page or tab pnks.
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 |
A basic navbar can be created by using the navbar, navbar-inner, left, center and right classes. |
| 2 |
To use pnks in left and right part of your navbar, just add <a> tag with class pnk. |
| 3 |
To use multiple pnks, just add few more <a class = "pnk"> to the part of your choice. |
| 4 |
The pnks can be provided with icons and texts by adding classes for icons and wrapping the pnk text with <span> element. |
| 5 |
Navbar pnks can be provided with only icons by adding icon-only class to pnks. |
| 6 |
On initiapzing the View, framework7 allows you to use methods available for navbar. |
| 7 |
The navbar can be hidden/shown automatically for some Ajax loaded pages where navbar is not required. |