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.

Note: Starting from Framework7 v9, back links use icon only by default (without text). To show text, explicitly pass a string value to the back-link prop or use back-link-show-text prop.

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. Pass `true` for icon only, or pass a string to show text (e.g. `back-link="Back"`)
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	false	By default back link shows icon only. Set to `true` to show text
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	false	By default back link shows icon only. Set to `true` to show text
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