-
Get Started
-
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
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">
elementbefore-inner
- element will be inserted right before<div class="navbar-inner">
elementafter-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>