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.

There are following components included:

  • f7-navbar
  • f7-nav-left
  • f7-nav-right
  • f7-nav-title
  • f7-nav-title-large
PropTypeDefaultDescription
<f7-navbar> properties
titlestringNavbar title
subtitlestringNavbar sub title
back-linkboolean
string
Adds back-link with text (if string value is specified)
back-link-urlstringCustom back link URL
back-link-forcebooleanfalseForce page to load and ignore previous page in history
back-link-show-textbooleanBy default back link text disable for MD theme
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
inner-classstringAdds additional class to navbar-inner element
inner-class-namestringAlias for inner-class prop
largebooleanEnables navbar with large title
transparentbooleanMakes navbar transparent. Can be used in addition to large prop to make large navbar transparent.
title-largestringNavbar large title text. If not specified then will be equal to title prop
<f7-nav-left> properties
back-linkboolean
string
Adds back-link with text (if string value is specified)
back-link-urlstringCustom back link URL
back-link-forcebooleanfalseForce page to load and ignore previous page in history
back-link-show-textbooleanBy default back link text disable for MD theme
slidingbooleanEnables "sliding" effect. By default inherits 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 inherits sliding prop of parent f7-navbar
<f7-nav-right> properties
slidingbooleanEnables "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
EventDescription
<f7-navbar> events
back-click
click:back
Event will be triggered after click on navbar back link
navbar:hideEvent will be triggered when Navbar becomes hidden
navbar:showEvent will be triggered when Navbar becomes visible
navbar:collapseEvent will be triggered when Navbar with large title collapsed (from large navbar to usual navbar)
navbar:expandEvent 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>