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.

Navbar Components

There are following components included:

  • f7-navbar
  • f7-nav-left
  • f7-nav-right
  • f7-nav-title

Navbar Properties

Prop Type Default Description
<f7-navbar> properties
inner boolean true When enabled (by default), it will put all the content within internal `navbar-inner` element. Disable it only in case you want to put totally custom layout inside
title string Navbar title
subtitle string Navbar sub 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 true Enables "sliding" effect for nav elements
no-shadow boolean false Disable shadow rendering for Material theme
no-hairline boolean false Disable navbar bottom thin border (hairline) for iOS theme
hidden boolean false Makes navbar hidden
<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. By default inhertis sliding prop of parent f7-navbar
<f7-nav-title> properties
title string Specifies element inner title text (affects if there is no child elements)
subtitle string Sub title text
sliding boolean Enables "sliding" effect. By default inhertis sliding prop of parent f7-navbar
<f7-nav-right> properties
sliding boolean Enables "sliding" effect. By default inhertis sliding prop of parent f7-navbar

Navbar Methods

<f7-navbar> methods
.hide(animate) Hide navbar
.show(animate) Show navbar
.size() Size navbar

Navbar Events

Event Description
<f7-navbar> events
back-click
click:back
Event will be triggered after click on navbar back link
<f7-nav-left> events
back-click
click:back
Event will be triggered after click on navbar back link

Navbar Slots

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

  • 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
<f7-navbar title="My App">
  <div slot="before-inner">Before Inner</div>
  <div slot="after-inner">After Inner</div>
  <div>Default slot</div>
</f7-navbar>

<!-- Renders to: -->

<div class="navbar">
  <div>Before Inner</div>
  <div class="navbar-inner">
    <div class="title">My App</div>
    <div>Default slot</div>
  </div>
  <div>After Inner</div>
</div>

Examples

Minimal layout

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

<!-- Renders to: -->

<div class="navbar">
  <div class="navbar-inner sliding">
    <div class="title">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 sliding">
    <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="title">My App</div>
  </div>
</div>

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

<f7-navbar title="My App" back-link="Back" :sliding="false"></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="title">My App</div>
  </div>
</div>

With additional right link to open right panel

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

<!-- Renders to: -->

<div class="navbar">
  <div class="navbar-inner sliding">
    <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="title">My App</div>
    <div class="right">
      <a href="#" class="link panel-open" data-panel="right">
        <i class="icon icon-bars"></i>
      </a>
    </div>
  </div>
</div>

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-nav-right>
</f7-navbar>

<!-- Renders to: -->

<div class="navbar">
  <div class="navbar-inner sliding">
    <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="title">My App</div>
    <div class="right">
      <a href="#" class="link panel-open" 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-title>My App</f7-nav-title>
  <f7-nav-right>
    <f7-link>Right Link</f7-link>
  </f7-nav-right>
</f7-navbar>

<!-- Renders to: -->

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