Navbar - 图1

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:

  1. <div class="navbar">
  2.     <div class="navbar-bg"></div>
  3.     <div class="navbar-inner">
  4.         <div class="left">Left</div>
  5.         <div class="title">Page Title</div>
  6.         <div class="right">Right</div>
  7.     </div>
  8. </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 it is cut. 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:

  1. <div class="navbar">
  2.     <div class="navbar-bg"></div>
  3.     <div class="navbar-inner">
  4.         <div class="left">
  5.             <a href="#" class="link">Left Link</a>
  6.         </div>
  7.         <div class="title">Page Title</div>
  8.         <div class="right">
  9.             <a href="#" class="link">Right Link</a>
  10.         </div>
  11.     </div>
  12. </div>

Multiple Links

Nothing extraordinary. Just add more <a class="link" to the required part:

  1. <div class="navbar">
  2.     <div class="navbar-bg"></div>
  3.     <div class="navbar-inner">
  4.         <div class="left">
  5.             <a href="#" class="link">Left 1</a>
  6.             <a href="#" class="link">Left 2</a>
  7.         </div>
  8.         <div class="title">Page Title</div>
  9.         <div class="right">
  10.             <a href="#" class="link">Right 1</a>
  11.         </div>
  12.     </div>
  13. </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:

  1. <div class="navbar">
  2.     <div class="navbar-bg"></div>
  3.     <div class="navbar-inner">
  4.         <div class="left">
  5.             <a href="#" class="link">
  6.                 <i class="icon icon-back"></i>
  7.                 <span>Back</span>
  8.             </a>
  9.         </div>
  10.         <div class="title">Title</div>
  11.         <div class="right">
  12.             <a href="#" class="link">
  13.                 <i class="icon another-icon"></i>
  14.                 <span>Menu</span>
  15.             </a>
  16.         </div>
  17.     </div>
  18. </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:

  1. <div class="navbar">
  2.     <div class="navbar-bg"></div>
  3.     <div class="navbar-inner">
  4.         <div class="left">
  5.             <a href="#" class="link icon-only">
  6.                 <i class="icon icon-back"></i>
  7.             </a>
  8.         </div>
  9.         <div class="title">Title</div>
  10.         <div class="right">
  11.             <a href="#" class="link icon-only">
  12.                 <i class="icon another-icon"></i>
  13.             </a>
  14.         </div>
  15.     </div>
  16. </div>

Transparent Navbar

This feature available since Framework7 version 5.5.0.

Transparent navbar appears with transparent background and transparent title and on page scroll it becomes opaque. To enable transparent navbar we need to add navbar-transparent class to navbar:

  1. <!-- additional "navbar-transparent" class -->
  2. <div class="navbar navbar-transparent">
  3.   ...
  4. </div>

Large Title

Large-title navbar has additional “row” (or “bar”) with large title text, which is get collapsed on page scroll. To make it large we need to add additional navbar-large class to navbar and add additional title-large element to it:

  1. <!-- additional "navbar-large" class -->
  2. <div class="navbar navbar-large">
  3.   <div class="navbar-bg"></div>
  4.   <div class="navbar-inner">
  5.     <div class="left">
  6.       <!-- ... -->
  7.     </div>
  8.     <!-- usual title will be visible when larget title collapsed -->
  9.     <div class="title">My App</div>
  10.     <div class="right">
  11.       <!-- ... -->
  12.     </div>
  13.     <!-- large title element -->
  14.     <div class="title-large">
  15.       <div class="title-large-text">My App</div>
  16.     </div>
  17.   </div>
  18. </div>

Large Transparent Title

We can also enabled large-title navbar to be “transparent”. When it is enabled, navbar background and its main title are hidden until page scrolled.

To make large title transparent we need additional navbar-transparent class:

  1. <!-- additional "navbar-transparent" class -->
  2. <div class="navbar navbar-large navbar-transparent">
  3.   <div class="navbar-bg"></div>
  4.   <div class="navbar-inner">
  5.     ...
  6.   </div>
  7. </div>

Theme-specific Styling

In ios and aurora themes Navbar has thin border on the bottom. To disable this border you need to add no-hairline class to navbar element:

  1. <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:

  1. <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 Type

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

  1. <div class="page">
  2.   <!-- Scrollable page content -->
  3.   <div class="page-content">
  4.     <!-- Static navbar goes in the beginning inside of page-content -->
  5.     <div class="navbar">...</div>
  6.     ...
  8.   </div>
  9. </div>

Fixed Navbar Type

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:

  1. <div class="page">
  2.   <!-- Fixed navbar goes ALWAYS FIRST -->
  3.   <div class="navbar">...</div>
  4.   <!-- Fixed toolbar goes ALWAYS AFTER navbar -->
  5.   <div class="toolbar toolbar-bottom">...</div>
  7.   <!-- Scrollable page content -->
  8.   <div class="page-content">
  9.     ...
  10.   </div>
  11. </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 Type

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:

  1. <div class="view">
  2.   <!-- View common navbar -->
  3.   <div class="navbar">...</div>
  5.   <!-- Pages -->
  6.   <div class="page">...</div>
  7. </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.

  1. <div class="views tabs">
  2.   <!-- Views common navbar -->
  3.   <div class="navbar">...</div>
  5.   <div class="view tab tab-active" id="tab-1">...</div>
  6.   <div class="view tab" id="tab-2">...</div>
  7.   ...
  8. </div>

Common Navbar must always be a direct child of Views/View and BEFORE the Toolbar (if common Toolbar is also 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 iosDynamicNavbar: false for required View on its initialisation or in global app parameters for all views. For example:

  1. // Disable globally
  2. var app = new Framework7({
  3.   view: {
  4.     iosDynamicNavbar: false,
  5.   },
  6. });
  8. // Disable only for view on its initialisation
  9. var mainView = app.views.create('.view-main', {
  10.   iosDynamicNavbar: false,
  11. });

Note that when Dynamic Navbar (iosDynamicNavbar) is enabled, Navbar HTML element will be detached from the page and moved under View HTML element. In this case to access page related dynamic navbar element use app.navbar.getElByPage(pageEl) method

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.

  1. <!-- No additional classes, all elements will have "fade" effect on page transition -->
  2. <div class="navbar">
  3.   <div class="navbar-bg"></div>
  4.   <div class="navbar-inner">
  5.     <div class="left">
  6.       <a href="#" class="link">Home Left</a>
  7.     </div>
  8.     <div class="title">Home</div>
  9.     <div class="right">
  10.       <a href="#" class="link">Home Right</a>
  11.     </div>
  12.   </div>
  13. </div>
  15. <!-- Title and Left will have "sliding" effect on page transition -->
  16. <div class="navbar">
  17.   <div class="navbar-bg"></div>
  18.   <div class="navbar-inner">
  19.     <!-- Additional "sliding" class -->
  20.     <div class="left sliding">
  21.       <a href="#" class="link">Home Left</a>
  22.     </div>
  23.     <!-- Additional "sliding" class -->
  24.     <div class="title sliding">Home</div>
  25.     <div class="right">
  26.       <a href="#" class="link">Home Right</a>
  27.     </div>
  28.   </div>
  29. </div>
  31. <!-- All parts will have "sliding" effect on page transition -->
  32. <div class="navbar">
  33.   <div class="navbar-bg"></div>
  34.   <!-- Additional "sliding" class -->
  35.   <div class="navbar-inner sliding">
  36.     <div class="left">
  37.       <a href="#" class="link">Home Left</a>
  38.     </div>
  39.     <div class="title">Home</div>
  40.     <div class="right">
  41.       <a href="#" class="link">Home Right</a>
  42.     </div>
  43.   </div>
  44. </div>

Navbar App Methods

We can use following app methods available for Navbar:

app.navbar.hide(navbarEl, animate, hideStatusbar)Hide navbar
  • navbarEl - HTMLElement or string (with CSS Selector) of required navbar. Required.
  • animate - Boolean - whether it should be hidden with animation or not. By default is true
  • hideStatusbar - Boolean - when false (default) it hides navbar partially keeping space required to cover statusbar area. Otherwise, navbar will be fully hidden.
app.navbar.show(navbarEl, animate)Show navbar
  • navbarEl - HTMLElement or string (with CSS Selector) of required navbar. Required.
  • animate - Boolean - whether 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.
  • 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.
  • pageEl - HTMLElement or string (with CSS Selector) of page where to look for navbar. Required.
app.navbar.getPageByEl(navbarEl)Get page HTML element by specified navbar element. Useful only when dynamic navbar is enabled. In this case it is out of the page container.
  • navbarEl - HTMLElement or string (with CSS Selector) of navbar to find relative page. Required.
app.navbar.collapseLargeTitle(navbarEl)Collapse large navbar title
  • navbarEl - HTMLElement or string (with CSS Selector) of navbar to collapse. Required.
app.navbar.expandLargeTitle(navbarEl)Expand large navbar title
  • navbarEl - HTMLElement or string (with CSS Selector) of navbar to expand. Required.
app.navbar.toggleLargeTitle(navbarEl)Toggle large navbar title
  • navbarEl - HTMLElement or string (with CSS Selector) of navbar to toggle (collapse or expand). 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:

ParameterTypeDefaultDescription
hideOnPageScrollbooleanfalseWill hide Navbars on page scroll
showOnPageScrollEndbooleantrueSet to true to show hidden Navbar when scrolling reaches end of the page
showOnPageScrollTopbooleantrueSet 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
scrollTopOnTitleClickbooleantrueWhen enabled then every click on navbar’s title element will scroll related page to the top
iosCenterTitlebooleantrueWhen enabled then it will try to position title at the center in iOS theme. Sometime (with some custom design) it may not needed.
mdCenterTitlebooleanfalseWhen enabled then it will try to position title at the center in MD theme. Sometime (with some custom design) it may not needed.
auroraCenterTitlebooleantrueWhen enabled then it will try to position title at the center in Aurora theme. Sometime (with some custom design) it may not needed.
collapseLargeTitleOnScrollbooleantrueWhen enabled large title will be collapsed on page scroll top, and expanded again on top of the page.
snapPageScrollToLargeTitlebooleantrueWhen enabled it will snap page scroll to large title collapse/expand positions, so it will make impossible to leave page scroll in the middle of large title position. Has effect only when collapseLargeTitleOnScroll is enabled.
snapPageScrollToTransparentNavbarbooleantrueWhen enabled it will snap page scroll to transparent navbar size, so it will make impossible to leave page scroll in the middle of transparent navbar position.

For example:

  1. var app = new Framework7({
  2.   navbar: {
  3.     hideOnPageScroll: true,
  4.     iosCenterTitle: false,
  5.   },
  6. });

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:

  1. <div class="page">
  2.   <div class="navbar">
  3.     ...
  4.   </div>
  5.   <!-- "hide-navbar-on-scroll" class to hide Navbar -->
  6.   <div class="page-content hide-navbar-on-scroll">
  7.     <div class="block">
  8.       <p>Scroll page down</p>
  9.       ...
  10.     </div>
  11.   </div>
  12. </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">):

  1. <!-- Page has additional "no-navbar" class -->
  2. <div class="page no-navbar">
  3.   <div class="page-content">
  4.       ...
  5.   </div>
  6. </div>

Navbar Events

Navbar will fire the following DOM events on Navbar element (<div class="navbar">) and app events on app instance:

DOM Events

EventTargetDescription
navbar:hideNavbar <div class=”navbar”>Event will be triggered when Navbar becomes hidden
navbar:showNavbar <div class=”navbar”>Event will be triggered when Navbar becomes visible
navbar:collapseNavbar <div class=”navbar”>Event will be triggered when Navbar with large title collapsed (from large navbar to usual navbar)
navbar:expandNavbar <div class=”navbar”>Event will be triggered when Navbar with large title expanded (from usual navbar to large navbar)

App Events

EventArgumentsDescription
navbarHide(el)Event will be triggered when Navbar becomes hidden
navbarShow(el)Event will be triggered when Navbar becomes visible
navbarCollapse(el)Event will be triggered when Navbar with large title collapsed (from large navbar to usual navbar)
navbarExpand(el)Event will be triggered when Navbar with large title expanded (from usual navbar to large navbar)

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

  1. :root {
  2.   /*
  3.   --f7-navbar-bg-color: var(--f7-bars-bg-color);
  4.   --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  5.   --f7-navbar-bg-image: var(--f7-bars-bg-image);
  6.   --f7-navbar-border-color: var(--f7-bars-border-color);
  7.   --f7-navbar-link-color: var(--f7-bars-link-color);
  8.   --f7-navbar-text-color: var(--f7-bars-text-color);
  9.   */
  10.   --f7-navbar-hide-show-transition-duration: 400ms;
  11.   --f7-navbar-title-line-height: 1.2;
  12.   --f7-navbar-title-font-size: inherit;
  13.   --f7-navbar-subtitle-text-align: inherit;
  14.   --f7-navbar-large-title-line-height: 1.2;
  15.   --f7-navbar-large-title-text-color: inherit;
  16.   --f7-navbar-large-title-padding-left: 16px;
  17.   --f7-navbar-large-title-padding-right: 16px;
  18. }
  19. .ios {
  20.   --f7-navbar-height: 44px;
  21.   --f7-navbar-tablet-height: 44px;
  22.   --f7-navbar-font-size: 17px;
  23.   --f7-navbar-inner-padding-left: 8px;
  24.   --f7-navbar-inner-padding-right: 8px;
  25.   --f7-navbar-title-font-weight: 600;
  26.   --f7-navbar-title-margin-left: 0;
  27.   --f7-navbar-title-margin-right: 0;
  28.   --f7-navbar-title-text-align: center;
  29.   --f7-navbar-subtitle-font-size: 10px;
  30.   --f7-navbar-subtitle-line-height: 1;
  31.   --f7-navbar-shadow-image: none;
  32.   --f7-navbar-large-title-height: 52px;
  33.   --f7-navbar-large-title-font-size: 34px;
  34.   --f7-navbar-large-title-font-weight: 700;
  35.   --f7-navbar-large-title-letter-spacing: -0.03em;
  36.   --f7-navbar-large-title-padding-vertical: 6px;
  37.   /*
  38.   --f7-navbar-link-height: var(--f7-navbar-height);
  39.   --f7-navbar-link-line-height: var(--f7-navbar-height);
  40.   */
  41.   --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
  42. }
  43. .ios .theme-dark,
  44. .ios.theme-dark {
  45.   --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
  46. }
  47. .md {
  48.   --f7-navbar-height: 56px;
  49.   --f7-navbar-tablet-height: 64px;
  50.   --f7-navbar-font-size: 20px;
  51.   --f7-navbar-inner-padding-left: 0px;
  52.   --f7-navbar-inner-padding-right: 0px;
  53.   --f7-navbar-title-font-weight: 500;
  54.   --f7-navbar-title-margin-left: 16px;
  55.   --f7-navbar-title-margin-right: 16px;
  56.   --f7-navbar-title-text-align: left;
  57.   --f7-navbar-subtitle-font-size: 14px;
  58.   --f7-navbar-subtitle-line-height: 1.2;
  59.   --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  60.   --f7-navbar-large-title-font-size: 34px;
  61.   --f7-navbar-large-title-height: 56px;
  62.   --f7-navbar-large-title-font-weight: 500;
  63.   --f7-navbar-large-title-letter-spacing: 0;
  64.   --f7-navbar-large-title-padding-vertical: 8px;
  65.   /*
  66.   --f7-navbar-link-height: var(--f7-navbar-height);
  67.   --f7-navbar-link-line-height: var(--f7-navbar-height);
  68.   */
  69.   --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
  70. }
  71. .md .theme-dark,
  72. .md.theme-dark {
  73.   --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
  74. }
  75. .aurora {
  76.   --f7-navbar-height: 38px;
  77.   --f7-navbar-tablet-height: 38px;
  78.   --f7-navbar-font-size: 14px;
  79.   --f7-navbar-inner-padding-left: 16px;
  80.   --f7-navbar-inner-padding-right: 16px;
  81.   --f7-navbar-title-font-weight: 600;
  82.   --f7-navbar-title-margin-left: 0;
  83.   --f7-navbar-title-margin-right: 0;
  84.   --f7-navbar-title-text-align: center;
  85.   --f7-navbar-subtitle-font-size: 12px;
  86.   --f7-navbar-subtitle-line-height: 1;
  87.   --f7-navbar-shadow-image: none;
  88.   --f7-navbar-large-title-height: 38px;
  89.   --f7-navbar-large-title-font-size: 26px;
  90.   --f7-navbar-large-title-font-weight: bold;
  91.   --f7-navbar-large-title-letter-spacing: -0.03em;
  92.   --f7-navbar-large-title-padding-vertical: 4px;
  93.   --f7-navbar-link-height: auto;
  94.   --f7-navbar-link-line-height: inherit;
  95.   --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
  96. }
  97. .aurora .theme-dark,
  98. .aurora.theme-dark {
  99.   --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
  100. }

Examples

Static Navbar

  1. <div class="page">
  2.   <div class="page-content">
  3.     <!-- Static Navbar -->
  4.     <div class="navbar">
  5.       <div class="navbar-bg"></div>
  6.       <div class="navbar-inner">
  7.         <div class="left">
  8.           <a class="link back">
  9.             <i class="icon icon-back"></i>
  10.             <span class="if-not-md">Back</span>
  11.           </a>
  12.         </div>
  13.         <div class="title">Static Navbar</div>
  14.         <div class="right"></div>
  15.       </div>
  16.     </div>
  17.     <div class="block">
  18.       <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>
  19.       ...
  20.     </div>
  21.   </div>
  22. </div>

Fixed Navbar

  1. <div class="page">
  2.   <!-- Fixed/Dynamic Navbar -->
  3.   <div class="navbar">
  4.     <div class="navbar-bg"></div>
  5.     <div class="navbar-inner sliding">
  6.       <div class="left">
  7.         <a class="link back">
  8.           <i class="icon icon-back"></i>
  9.           <span class="if-not-md">Back</span>
  10.         </a>
  11.       </div>
  12.       <div class="title">Fixed Navbar</div>
  13.     </div>
  14.   </div>
  15.   <div class="page-content">
  16.     <div class="block">
  17.       <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>
  18.       ...
  19.     </div>
  20.   </div>
  21. </div>

Transparent Navbar

  1. <div class="page">
  2.   <!-- Transparent Navbar, has additional "navbar-transparent" class -->
  3.   <div class="navbar navbar-transparent">
  4.     <div class="navbar-bg"></div>
  5.     <div class="navbar-inner sliding">
  6.       <div class="left">
  7.         <a class="link back">
  8.           <i class="icon icon-back"></i>
  9.           <span class="if-not-md">Back</span>
  10.         </a>
  11.       </div>
  12.       <div class="title">Fixed Navbar</div>
  13.     </div>
  14.   </div>
  15.   <div class="page-content">
  16.     <div class="block">
  17.       <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>
  18.       ...
  19.     </div>
  20.   </div>
  21. </div>

Large Title

  1. <div class="page">
  2.   <!-- Additional "navbar-large" class on navbar -->
  3.   <div class="navbar navbar-large">
  4.     <div class="navbar-bg"></div>
  5.     <div class="navbar-inner sliding">
  6.       <div class="left">
  7.         <a class="link back">
  8.           <i class="icon icon-back"></i>
  9.           <span class="if-not-md">Back</span>
  10.         </a>
  11.       </div>
  12.       <div class="title">Large Title</div>
  13.       <!-- Large title element -->
  14.       <div class="title-large">
  15.         <div class="title-large-text">Large Title</div>
  16.       </div>
  17.     </div>
  18.   </div>
  19.   <div class="page-content">
  20.     <div class="block">
  21.       <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>
  22.       ...
  23.     </div>
  24.   </div>
  25. </div>

Large Transparent

  1. <div class="page">
  2.   <!-- Additional "navbar-transparent" class -->
  3.   <div class="navbar navbar-large navbar-transparent">
  4.     <div class="navbar-bg"></div>
  5.     <div class="navbar-inner sliding">
  6.       <div class="left">
  7.         <a class="link back">
  8.           <i class="icon icon-back"></i>
  9.           <span class="if-not-md">Back</span>
  10.         </a>
  11.       </div>
  12.       <div class="title">Large Transparent</div>
  13.       <!-- Large title element -->
  14.       <div class="title-large">
  15.         <div class="title-large-text">Large Title</div>
  16.       </div>
  17.     </div>
  18.   </div>
  19.   <div class="page-content">
  20.     <div class="block">
  21.       <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>
  22.       ...
  23.     </div>
  24.   </div>
  25. </div>

Navbar API

  1. <div class="page">
  2.   <div class="navbar">
  3.     <div class="navbar-bg"></div>
  4.     <div class="navbar-inner sliding">
  5.       <div class="left">
  6.         <a class="link back">
  7.           <i class="icon icon-back"></i>
  8.           <span class="if-not-md">Back</span>
  9.         </a>
  10.       </div>
  11.       <div class="title">Navbar API</div>
  12.     </div>
  13.   </div>
  14.   <div class="page-content">
  15.     <div class="block">
  16.       <p><a class="button button-raised hide-navbar">Hide Navbar</a></p>
  17.       <p><a class="button button-raised show-navbar">Show Navbar</a></p>
  18.       <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>
  19.       ...
  20.     </div>
  21.   </div>
  22. </div>
  1. var app = new Framework7();
  3. var $$ = Dom7;
  5. $$('.hide-navbar').on('click', function () {
  6.   app.navbar.hide('.navbar');
  7. });
  8. $$('.show-navbar').on('click', function () {
  9.   app.navbar.show('.navbar');
  10. });

Hide On Scroll

  1. <div class="page">
  2.   <div class="navbar">
  3.     <div class="navbar-bg"></div>
  4.     <div class="navbar-inner sliding">
  5.       <div class="left">
  6.         <a class="link back">
  7.           <i class="icon icon-back"></i>
  8.           <span class="if-not-md">Back</span>
  9.         </a>
  10.       </div>
  11.       <div class="title">Hide On Scroll</div>
  12.     </div>
  13.   </div>
  14.   <!-- Additional "hide-navbar-on-scroll" class to hide navbar on scroll automatically -->
  15.   <div class="page-content hide-navbar-on-scroll">
  16.     <div class="block">
  17.       <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>
  18.       ...
  19.     </div>
  20.   </div>
  21. </div>

← Messages

Notification →