Navbar Vue Component

• Navbar Components
• Navbar Events
• Examples

• **f7-nav-left**
• **f7-nav-right**
• **f7-nav-title**
• **f7-nav-title-large**

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
• **after-inner** - element will be inserted right after <div class="navbar-inner"> element
• **nav-left** - element will be inserted in navbar’s left element
• **nav-right** - element will be inserted in navbar’s right element

Examples

Minimal layout

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

Minimal layout with back link

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

With additional right link to open right panel

With large title

<f7-navbar title="My App" back-link="Back" large></f7-navbar>
<!-- with different large title text -->
<f7-navbar title="My App" back-link="Back" large title-large="Large Title"></f7-navbar>

All three parts

Full custom layout

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