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.
<f7-navbar title="My App"></f7-navbar>
Renders to:
<div class="navbar">
<div class="navbar-inner">
<div class="center">My App</div>
</div>
</div>
<f7-navbar title="My App" back-link="Back"></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="center">My App</div>
</div>
</div>
<f7-navbar title="My App" back-link="Back" sliding></f7-navbar>
Renders to:
<div class="navbar">
<div class="navbar-inner">
<div class="left sliding">
<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="center sliding">My App</div>
</div>
</div>
<f7-navbar title="My App" back-link="Back" sliding>
<f7-nav-right>
<f7-link icon="icon-bars" open-panel="right"></f7-link>
</f7-nav-right>
</f7-navbar>
Renders to:
<div class="navbar">
<div class="navbar-inner">
<div class="left sliding">
<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="center sliding">My App</div>
<div class="right">
<a href="#" class="link open-panel" data-panel="right">
<i class="icon icon-bars"></i>
</a>
</div>
</div>
</div>
<f7-navbar>
<f7-nav-left back-link="Back" sliding></f7-nav-left>
<f7-nav-center>My App</f7-nav-center>
<f7-nav-right>
<f7-link icon="icon-bars" open-panel="right"></f7-link>
</f7-nav-right>
</f7-navbar>
Renders to:
<div class="navbar">
<div class="navbar-inner">
<div class="left" sliding>
<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="center">My App</div>
<div class="right">
<a href="#" class="link open-panel" data-panel="right">
<i class="icon icon-bars"></i>
</a>
</div>
</div>
</div>
<f7-navbar>
<f7-nav-left>
<f7-link>Left Link</f7-link>
</f7-nav-left>
<f7-nav-center>My App</f7-nav-center>
<f7-nav-right>
<f7-link>Right Link</f7-link>
</f7-nav-right>
</f7-navbar>
Renders to:
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link">Left Link</a>
</div>
<div class="center">My App</div>
<div class="right">
<a href="#" class="link">Right Link</a>
</div>
</div>
</div>
Navbar Vue component (<f7-navbar>) has additional slots for custom elements:
<f7-navbar title="My App">
<div slot="before-inner">Before Inner</div>
<div slot="after-inner">After Inner</div>
</f7-navbar>
Renders to:
<div class="navbar">
<div>Before Inner</div>
<div class="navbar-inner">
<div class="center">My App</div>
</div>
<div>After Inner</div>
</div>
Prop | Type | Description |
---|---|---|
<f7-navbar> properties | ||
title | string | Navbar 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 | Enables "sliding" effect for nav elements. Affects only for back-link and title elements when they are specified via props |
theme | string | Navbar theme color. One of default colors |
layout | string | Navbar layout theme. One of default layout themes |
no-shadow | boolean | Disable shadow rendering for Material theme |
<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 |
<f7-nav-center> properties | ||
title | string | Specifies element inner title text (affects if there is no child elements) |
sliding | boolean | Enables "sliding" effect |
<f7-nav-right> properties | ||
sliding | boolean | Enables "sliding" effect |
.hide(animated) | Hide navbar |
.show(animated) | Show navbar |
.size() | Size navbar |
Event | Description |
---|---|
back-click | Event will be triggered when click on navbar back link |
Dynamic Navbar is supported only in iOS Theme
If you use Dynamic Navbar in your app then it will also have useful special events:
Event | Description |
---|---|
navbar:beforeinit | Event will be triggered when Framework7 just inserts new navbar inner to DOM |
navbar:init | Event will be triggered after Framework7 initialize navbar |
navbar:reinit | This event will be triggered when cached navbar inner becomes visible. It is only applicaple for Inline Pages (DOM cached pages) |
navbar:beforeremove | Event will be triggered right before navbar inner will be removed from DOM. This event could be very useful if you need to detach some events / destroy some plugins to free memory |