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.

There are following components included:

f7-navbar
f7-nav-left
f7-nav-right
f7-nav-title
f7-nav-title-large

Prop	Type	Default	Description
<f7-navbar> properties
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
back-link-force	boolean	false	Force page to load and ignore previous page in history
back-link-show-text	boolean		By default back link text disable for MD theme
sliding	boolean	true	Enables "sliding" effect for nav elements
outline	boolean	true	Adds navbar bottom thin border (hairline) for iOS theme
hidden	boolean	false	Makes navbar hidden
inner-class	string		Adds additional class to `navbar-inner` element
inner-class-name	string		Alias for `inner-class` prop
large	boolean		Enables navbar with large title
transparent	boolean		Makes navbar transparent. Can be used in addition to `large` prop to make large navbar transparent.
title-large	string		Navbar large title text. If not specified then will be equal to `title` prop
<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
back-link-force	boolean	false	Force page to load and ignore previous page in history
back-link-show-text	boolean		By default back link text disable for MD theme
sliding	boolean		Enables "sliding" effect. By default inherits `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 inherits `sliding` prop of parent `f7-navbar`
<f7-nav-right> properties
sliding	boolean		Enables "sliding" effect. By default inherits `sliding` prop of parent `f7-navbar`

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

Event	Description
<f7-navbar> events
back-click click:back	Event will be triggered after click on navbar back link
navbar:hide	Event will be triggered when Navbar becomes hidden
navbar:show	Event will be triggered when Navbar becomes visible
navbar:collapse	Event will be triggered when Navbar with large title collapsed (from large navbar to usual navbar)
navbar:expand	Event will be triggered when Navbar with large title expanded (from usual navbar to large navbar)
<f7-nav-left> events
back-click click:back	Event will be triggered after click on navbar back link

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
left - element will be inserted in navbar's left element
right - element will be inserted in navbar's right element
title - element will be inserted in navbar's title element
title-large - element will be inserted in navbar's large title text element

<f7-navbar title="My App">
  <a href="#" slot="left">Left Link</a>
  <a href="#" slot="right">Right Link</a>
  <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 class="navbar-bg"></div>
  <div>Before Inner</div>
  <div class="navbar-inner">
    <div class="left">
      <a href="#">Left Link</a>
    </div>
    <div class="title">My App</div>
    <div class="right">
      <a href="#">Right Link</a>
    </div>
    <div>Default slot</div>
  </div>
  <div>After Inner</div>
</div>

Examples

Minimal layout

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

Minimal layout with back link

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

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

<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>

<!-- or -->

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

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

<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>

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>

Improve this Doc

On this page

Navbar Components
Navbar Properties
Navbar Methods
Navbar Events
Navbar Slots
Examples

Navbar Vue Component

Navbar Components

Navbar Properties

Navbar Methods

Navbar Events

Navbar Slots