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:

Navbar layout is pretty simple and self explaining:

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">Left</div>
        <div class="title">Page Title</div>
        <div class="right">Right</div>
    </div>
</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.

To add links in Left or Right part you just need to add the plain <a> tag with additional link class:

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Left Link</a>
        </div>
        <div class="title">Page Title</div>
        <div class="right">
            <a href="#" class="link">Right Link</a>
        </div>
    </div>
</div>

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

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Left 1</a>
            <a href="#" class="link">Left 2</a>
        </div>
        <div class="title">Page Title</div>
        <div class="right">
            <a href="#" class="link">Right 1</a>
        </div>
    </div>
</div>

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:

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link back">
                <i class="icon icon-back"></i>
                <span>Back</span>
            </a>
        </div>
        <div class="title">Title</div>
        <div class="right">
            <a href="#" class="link">
                <i class="icon another-icon"></i>
                <span>Menu</span>
            </a>
        </div>
    </div>
</div>

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:

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link icon-only">
                <i class="icon icon-back"></i>
            </a>
        </div>
        <div class="title">Title</div>
        <div class="right">
            <a href="#" class="link icon-only">
                <i class="icon another-icon"></i>
            </a>
        </div>
    </div>
</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:

<!-- additional "navbar-transparent" class -->
<div class="navbar navbar-transparent">
  ...
</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:

<!-- additional "navbar-large" class -->
<div class="navbar navbar-large">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <div class="left">
      <!-- ... -->
    </div>
    <!-- usual title will be visible when larger title collapsed -->
    <div class="title">My App</div>
    <div class="right">
      <!-- ... -->
    </div>
    <!-- large title element -->
    <div class="title-large">
      <div class="title-large-text">My App</div>
    </div>
  </div>
</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:

<!-- additional "navbar-transparent" class -->
<div class="navbar navbar-large navbar-transparent">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    ...
  </div>
</div>

Theme-specific Styling

In ios theme Navbar has thin border on the bottom. To disable this border you need to add no-outline class to navbar element:

<div class="navbar no-outline">...</div>

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:

<div class="page">
  <!-- Scrollable page content -->
  <div class="page-content">
    <!-- Static navbar goes in the beginning inside of page-content -->
    <div class="navbar">...</div>
    ...

  </div>
</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:

<div class="page">
  <!-- Fixed navbar goes ALWAYS FIRST -->
  <div class="navbar">...</div>
  <!-- Fixed toolbar goes ALWAYS AFTER navbar -->
  <div class="toolbar toolbar-bottom">...</div>

  <!-- Scrollable page content -->
  <div class="page-content">
    ...
  </div>
</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:

<div class="view">
  <!-- View common navbar -->
  <div class="navbar">...</div>

  <!-- Pages -->
  <div class="page">...</div>
</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.

<div class="views tabs">
  <!-- Views common navbar -->
  <div class="navbar">...</div>

  <div class="view tab tab-active" id="tab-1">...</div>
  <div class="view tab" id="tab-2">...</div>
  ...
</div>

Common Navbar must always be a direct child of Views/View and BEFORE the Toolbar (if common Toolbar is also used)

Dynamic Navbar

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:

// Disable globally
var app = new Framework7({
  view: {
    iosDynamicNavbar: false,
  },
});

// Disable only for view on its initialisation
var mainView = app.views.create('.view-main', {
  iosDynamicNavbar: false,
});

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:

<!-- No additional classes, all elements will have "fade" effect on page transition -->
<div class="navbar">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="link">Home Left</a>
    </div>
    <div class="title">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

<!-- Title and Left will have "sliding" effect on page transition -->
<div class="navbar">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <!-- Additional "sliding" class -->
    <div class="left sliding">
      <a href="#" class="link">Home Left</a>
    </div>
    <!-- Additional "sliding" class -->
    <div class="title sliding">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

<!-- All parts will have "sliding" effect on page transition -->
<div class="navbar">
  <div class="navbar-bg"></div>
  <!-- Additional "sliding" class -->
  <div class="navbar-inner sliding">
    <div class="left">
      <a href="#" class="link">Home Left</a>
    </div>
    <div class="title">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

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.

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

var app = new Framework7({
  navbar: {
    hideOnPageScroll: true,
    iosCenterTitle: false,
  },
});

Control Navbar With Page Classes

Framework7 allows you to hide/show Navbar on specific page or on specific page scroll 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:

To disable this behavior on specific pages you may use the following additional classes:

For example:

<div class="page">
  <div class="navbar">
    ...
  </div>
  <!-- "hide-navbar-on-scroll" class to hide Navbar -->
  <div class="page-content hide-navbar-on-scroll">
    <div class="block">
      <p>Scroll page down</p>
      ...
    </div>
  </div>
</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">):

<!-- Page has additional "no-navbar" class -->
<div class="page no-navbar">
  <div class="page-content">
      ...
  </div>
</div>

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.

:root {
  /*
  --f7-navbar-bg-color: var(--f7-bars-bg-color);
  --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-navbar-border-color: var(--f7-bars-border-color);
  */
  --f7-navbar-hide-show-transition-duration: 400ms;
  --f7-navbar-title-line-height: 1.2;
  --f7-navbar-subtitle-text-align: inherit;
  --f7-navbar-large-title-line-height: 1.2;
  --f7-navbar-large-title-text-color: inherit;
  --f7-navbar-large-title-padding-left: 16px;
  --f7-navbar-large-title-padding-right: 16px;
}
.ios {
  /*
  --f7-navbar-link-color: var(--f7-bars-link-color);
  --f7-navbar-text-color: var(--f7-bars-text-color);
  */
  --f7-navbar-height: 44px;
  --f7-navbar-font-size: 17px;
  --f7-navbar-title-font-size: inherit;
  --f7-navbar-inner-padding-left: 8px;
  --f7-navbar-inner-padding-right: 8px;
  --f7-navbar-title-font-weight: 600;
  --f7-navbar-title-margin-left: 0;
  --f7-navbar-title-margin-right: 0;
  --f7-navbar-title-text-align: center;
  --f7-navbar-subtitle-font-size: 10px;
  --f7-navbar-subtitle-line-height: 1;
  --f7-navbar-large-title-height: 52px;
  --f7-navbar-large-title-font-size: 34px;
  --f7-navbar-large-title-font-weight: 700;
  --f7-navbar-large-title-letter-spacing: -0.03em;
  --f7-navbar-large-title-padding-vertical: 6px;
  /*
  --f7-navbar-link-height: var(--f7-navbar-height);
  --f7-navbar-link-line-height: var(--f7-navbar-height);
  */
  --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
}
.ios .dark,
.ios.dark {
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-navbar-height: 64px;
  --f7-navbar-font-size: 16px;
  --f7-navbar-title-font-size: 22px;
  --f7-navbar-inner-padding-left: 0px;
  --f7-navbar-inner-padding-right: 0px;
  --f7-navbar-title-font-weight: 400;
  --f7-navbar-title-margin-left: 0px;
  --f7-navbar-title-margin-right: 16px;
  --f7-navbar-title-text-align: left;
  --f7-navbar-subtitle-font-size: 14px;
  --f7-navbar-subtitle-line-height: 1.2;
  --f7-navbar-large-title-font-size: 28px;
  --f7-navbar-large-title-height: 88px;
  --f7-navbar-large-title-font-weight: 400;
  --f7-navbar-large-title-letter-spacing: 0;
  --f7-navbar-large-title-padding-vertical: 8px;
  --f7-navbar-link-height: 48px;
  --f7-navbar-link-line-height: 48px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-navbar-link-color: var(--f7-md-on-surface);
  --f7-navbar-text-color: var(--f7-md-on-surface);
  --f7-navbar-subtitle-text-color: var(--f7-md-on-surface-variant);
}

Examples

Static Navbar

navbar-static.f7.html
<div class="page no-navbar">
  <div class="page-content">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Static Navbar</div>
        <div class="right"></div>
      </div>
    </div>
    <div class="block">
      <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>
      <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>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
  </div>
</div>

Fixed Navbar

navbar-fixed.f7.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Fixed Navbar</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <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>
      <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>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
      <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>
      <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>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
  </div>
</div>

Transparent Navbar

navbar-transparent.f7.html
<div class="page">
  <div class="navbar navbar-transparent">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Transparent Navbar</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <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>
      <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>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
      <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>
      <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>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
  </div>
</div>

Large Title

navbar-large.f7.html
<div class="page">
  <div class="navbar navbar-large">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Large Title</div>
      <div class="title-large">
        <div class="title-large-text">Large Title</div>
      </div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <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>
      <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>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
      <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>
      <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>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
  </div>
</div>

Large Transparent

navbar-large-transparent.f7.html
<div class="page">
  <div class="navbar navbar-large navbar-transparent">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Large Transparent</div>
      <div class="title-large">
        <div class="title-large-text">Large Transparent</div>
      </div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <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>
      <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>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
      <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>
      <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>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
  </div>
</div>
navbar-api.f7.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Navbar API</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p><a class="button button-raised button-fill" @click=${hideNavbar}>Hide Navbar</a></p>
        <p><a class="button button-raised button-fill" @click=${showNavbar}>Show Navbar</a></p>
        <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>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
          eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
        <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>
        <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>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
          eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $on, $f7 }) => {
    let navbarEl;
    const hideNavbar = () => {
      $f7.navbar.hide(navbarEl);
    }
    const showNavbar = () => {
      $f7.navbar.show(navbarEl);
    }
    $on('pageInit', (e, page) => {
      navbarEl = $f7.navbar.getElByPage(page);
    });

    return $render;
  }
</script>

Hide On Scroll

navbar-hide-on-scroll.f7.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Hide On Scroll</div>
    </div>
  </div>
  <div class="page-content hide-navbar-on-scroll">
    <div class="block">
      <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>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
      <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>
      <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>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
  </div>
</div>