Navbar Vue Component

• Navbar Properties
• Navbar Events
• Examples

• **f7-nav-left**
• **f7-nav-right**

Navbar Properties

Navbar Events

• **default** - element will be inserted as a child of <div class="navbar-inner"> element
• **before-inner** - element will be inserted right before <div class="navbar-inner"> element
• - element will be inserted right after <div class="navbar-inner"> element

Examples

Minimal layout

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

Minimal layout with back link

Without “sliding” transition effect (affects iOS theme only)

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

With additional right link to open right panel

All three parts

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

Full custom layout