Language: ENCN

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