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

PropTypeDefaultDescription
<f7-navbar> properties
innerbooleantrueWhen 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
titlestringNavbar title
subtitlestringNavbar sub title
back-linkboolean
string
Adds back-link with text (if string value is specified)
back-link-urlstringCustom back link URL
slidingbooleantrueEnables “sliding” effect for nav elements
no-shadowbooleanfalseDisable shadow rendering for Material theme
no-hairlinebooleanfalseDisable navbar bottom thin border (hairline) for iOS theme
hiddenbooleanfalseMakes navbar hidden
innerClassstringAdds additional class to navbar-inner element
<f7-nav-left> properties
back-linkboolean
string
Adds back-link with text (if string value is specified)
back-link-urlstringCustom back link URL
slidingbooleanEnables “sliding” effect. By default inhertis sliding prop of parent f7-navbar
<f7-nav-title> properties
titlestringSpecifies element inner title text (affects if there is no child elements)
subtitlestringSub title text
slidingbooleanEnables “sliding” effect. By default inhertis sliding prop of parent f7-navbar
<f7-nav-right> properties
slidingbooleanEnables “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

EventDescription
<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"> 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
  1. <f7-navbar title="My App">
  2. <div slot="before-inner">Before Inner</div>
  3. <div slot="after-inner">After Inner</div>
  4. <div>Default slot</div>
  5. </f7-navbar>
  6. <!-- Renders to: -->
  7. <div class="navbar">
  8. <div>Before Inner</div>
  9. <div class="navbar-inner">
  10. <div class="title">My App</div>
  11. <div>Default slot</div>
  12. </div>
  13. <div>After Inner</div>
  14. </div>

Examples

Minimal layout

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

Minimal layout with back link

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

Without “sliding” transition effect (affects iOS theme only)

  1. <f7-navbar title="My App" back-link="Back" :sliding="false"></f7-navbar>

With additional right link to open right panel

  1. <f7-navbar title="My App" back-link="Back">
  2. <f7-nav-right>
  3. <f7-link icon="icon-bars" panel-open="right"></f7-link>
  4. </f7-nav-right>
  5. </f7-navbar>

All three parts

  1. <f7-navbar>
  2. <f7-nav-left back-link="Back"></f7-nav-left>
  3. <f7-nav-title>My App</f7-nav-title>
  4. <f7-nav-right>
  5. <f7-link icon="icon-bars" panel-open="right"></f7-link>
  6. </f7-nav-right>
  7. </f7-navbar>

Full custom layout

  1. <f7-navbar>
  2. <f7-nav-left>
  3. <f7-link>Left Link</f7-link>
  4. </f7-nav-left>
  5. <f7-nav-title>My App</f7-nav-title>
  6. <f7-nav-right>
  7. <f7-link>Right Link</f7-link>
  8. </f7-nav-right>
  9. </f7-navbar>