Navbar Vue Component

Navbar is a fixed (with Fixed and Through layout types) area at the top of a screen that contains Page title and navigation elements.

Navbar Vue component represents Navbar component.

Usage examples

Minimal layout

<f7-navbar title="My App"></f7-navbar>

Renders to:

<div class="navbar">
  <div class="navbar-inner">
    <div class="center">My App</div>
  </div>
</div>

Minimal layout with back link

<f7-navbar title="My App" back-link="Back"></f7-navbar>

Renders to:

<div class="navbar">
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="back link">
        <i class="icon icon-back"></i>
        <!-- Back link text rendered only for iOS theme -->
        <span>Back</span>
      </a>
    </div>
    <div class="center">My App</div>
  </div>
</div>

With "sliding" transition effect (affects iOS theme only)

<f7-navbar title="My App" back-link="Back" sliding></f7-navbar>

Renders to:

<div class="navbar">
  <div class="navbar-inner">
    <div class="left sliding">
      <a href="#" class="back link">
        <i class="icon icon-back"></i>
        <!-- Back link text rendered only for iOS theme -->
        <span>Back</span>
      </a>
    </div>
    <div class="center sliding">My App</div>
  </div>
</div>

With additional right link to open right panel

<f7-navbar title="My App" back-link="Back" sliding>
  <f7-nav-right>
    <f7-link icon="icon-bars" open-panel="right"></f7-link>
  </f7-nav-right>
</f7-navbar>

Renders to:

<div class="navbar">
  <div class="navbar-inner">
    <div class="left sliding">
      <a href="#" class="back link">
        <i class="icon icon-back"></i>
        <!-- Back link text rendered only for iOS theme -->
        <span>Back</span>
      </a>
    </div>
    <div class="center sliding">My App</div>
    <div class="right">
      <a href="#" class="link open-panel" data-panel="right">
        <i class="icon icon-bars"></i>
      </a>
    </div>
  </div>
</div>

All three parts

<f7-navbar>
  <f7-nav-left back-link="Back" sliding></f7-nav-left>
  <f7-nav-center>My App</f7-nav-center>
  <f7-nav-right>
    <f7-link icon="icon-bars" open-panel="right"></f7-link>
  </f7-nav-right>
</f7-navbar>

Renders to:

<div class="navbar">
  <div class="navbar-inner">
    <div class="left" sliding>
      <a href="#" class="back link">
        <i class="icon icon-back"></i>
        <!-- Back link text rendered only for iOS theme -->
        <span>Back</span>
      </a>
    </div>
    <div class="center">My App</div>
    <div class="right">
      <a href="#" class="link open-panel" data-panel="right">
        <i class="icon icon-bars"></i>
      </a>
    </div>
  </div>
</div>

Full custom layout

<f7-navbar>
  <f7-nav-left>
    <f7-link>Left Link</f7-link>
  </f7-nav-left>
  <f7-nav-center>My App</f7-nav-center>
  <f7-nav-right>
    <f7-link>Right Link</f7-link>
  </f7-nav-right>
</f7-navbar>

Renders to:

<div class="navbar">
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="link">Left Link</a>
    </div>
    <div class="center">My App</div>
    <div class="right">
      <a href="#" class="link">Right Link</a>
    </div>
  </div>
</div>

Slots

Navbar Vue component (<f7-navbar>) has additional slots for custom elements:

• before-inner - element will be inserted right before <div class="navbar-inner"> element
• after-inner - element will be inserted right after <div class="navbar-inner"> element

<f7-navbar title="My App">
  <div slot="before-inner">Before Inner</div>
  <div slot="after-inner">After Inner</div>
</f7-navbar>

Renders to:

<div class="navbar">
  <div>Before Inner</div>
  <div class="navbar-inner">
    <div class="center">My App</div>
  </div>
  <div>After Inner</div>
</div>

Properties

Prop	Type	Description
<f7-navbar> properties
title	string	Navbar title
back-link	boolean/string	Adds back-link with text (if string value is specified)
back-link-url	string	Custom back link URL
sliding	boolean	Enables "sliding" effect for nav elements. Affects only for back-link and title elements when they are specified via props
theme	string	Navbar theme color. One of default colors
layout	string	Navbar layout theme. One of default layout themes
no-shadow	boolean	Disable shadow rendering for Material theme
<f7-nav-left> properties
back-link	boolean/string	Adds back-link with text (if string value is specified)
back-link-url	string	Custom back link URL
sliding	boolean	Enables "sliding" effect
<f7-nav-center> properties
title	string	Specifies element inner title text (affects if there is no child elements)
sliding	boolean	Enables "sliding" effect
<f7-nav-right> properties
sliding	boolean	Enables "sliding" effect

Methods

.hide(animated)	Hide navbar
.show(animated)	Show navbar
.size()	Size navbar

Navbar Events

Event	Description
back-click	Event will be triggered when click on navbar back link

Dynamic Navbar Events

Dynamic Navbar is supported only in iOS Theme

If you use Dynamic Navbar in your app then it will also have useful special events:

Event	Description
navbar:beforeinit	Event will be triggered when Framework7 just inserts new navbar inner to DOM
navbar:init	Event will be triggered after Framework7 initialize navbar
navbar:reinit	This event will be triggered when cached navbar inner becomes visible. It is only applicaple for Inline Pages (DOM cached pages)
navbar:beforeremove	Event will be triggered right before navbar inner will be removed from DOM. This event could be very useful if you need to detach some events / destroy some plugins to free memory