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
Prop Type Default Description
<f7-navbar> properties
--- --- --- ---
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
back-link-force boolean false Force page to load and ignore previous page in history
back-link-show-text boolean By default back link text disable for MD theme
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
large boolean Enables navbar with large title
transparent boolean Makes navbar transparent. Can be used in addition to large prop to make large navbar transparent.
title-large string Navbar large title text. If not specified then will be equal to title prop
<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
back-link-force boolean false Force page to load and ignore previous page in history
back-link-show-text boolean By default back link text disable for MD theme
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
<f7-navbar> methods
.hide(animate) Hide navbar
.show(animate) Show navbar
.size() Size navbar
Event Description
<f7-navbar> events
--- ---
back-click click:back Event will be triggered after click on navbar back link
navbar:hide Event will be triggered when Navbar becomes hidden
navbar:show Event will be triggered when Navbar becomes visible
navbar:collapse Event will be triggered when Navbar with large title collapsed (from large navbar to usual navbar)
navbar:expand Event 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
1. <f7-navbar title="My App">
2. <a href="#" slot="left">Left Link</a>
3. <a href="#" slot="right">Right Link</a>
4. <div slot="before-inner">Before Inner</div>
5. <div slot="after-inner">After Inner</div>
6. <div>Default slot</div>
7. </f7-navbar>

9. <!-- Renders to: -->

11. <div class="navbar">
12. <div class="navbar-bg"></div>
13. <div>Before Inner</div>
14. <div class="navbar-inner">
15. <div class="left">
16. <a href="#">Left Link</a>
17. </div>
18. <div class="title">My App</div>
19. <div class="right">
20. <a href="#">Right Link</a>
21. </div>
22. <div>Default slot</div>
23. </div>
24. <div>After Inner</div>
25. </div>

Examples

Minimal layout

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

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>

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>

7. <!-- or -->

9. <f7-navbar title="My App" back-link="Back">
10. <f7-link slot="right" icon="icon-bars" panel-open="right"></f7-link>
11. </f7-navbar>

With large title

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

3. <!-- with different large title text -->

5. <f7-navbar title="My App" back-link="Back" large title-large="Large Title"></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>

← Messages

Page →