-
Get Started
-
Vue Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- 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 |
innerClass | string | Adds additional class to navbar-inner element |
|
<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>
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>
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>