Navbar React 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 React component represents Navbar component.

Usage examples

Minimal layout

<Navbar title="My App"></Navbar>

Renders to:

<div class="navbar">
  <div class="navbar-inner">
    <div class="center">My App</div>
  </div>
</div>

Minimal layout with back link

<Navbar title="My App" backLink="Back"></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="center">My App</div>
  </div>
</div>

With "sliding" transition effect (affects iOS theme only)

<Navbar title="My App" backLink="Back" sliding></Navbar>

Renders to:

<div class="navbar">
  <div class="navbar-inner">
    <div class="left sliding">
      <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="center sliding">My App</div>
  </div>
</div>

With additional right link to open right panel

<Navbar title="My App" backLink="Back" sliding>
  <NavRight>
    <Link icon="iconBars" openPanel="right"></Link>
  </NavRight>
</Navbar>

Renders to:

<div class="navbar">
  <div class="navbar-inner">
    <div class="left sliding">
      <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="center sliding">My App</div>
    <div class="right">
      <a href="#" class="link open-panel" data-panel="right">
        <i class="icon icon-bars"></i>
      </a>
    </div>
  </div>
</div>

All three parts

<Navbar>
  <NavLeft backLink="Back" sliding></NavLeft>
  <NavCenter>My App</NavCenter>
  <NavRight>
    <Link icon="iconBars" openPanel="right"></Link>
  </NavRight>
</Navbar>

Renders to:

<div class="navbar">
  <div class="navbar-inner">
    <div class="left" sliding>
      <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="center">My App</div>
    <div class="right">
      <a href="#" class="link open-panel" data-panel="right">
        <i class="icon icon-bars"></i>
      </a>
    </div>
  </div>
</div>

Full custom layout

<Navbar>
  <NavLeft>
    <Link>Left Link</Link>
  </NavLeft>
  <NavCenter>My App</NavCenter>
  <NavRight>
    <Link>Right Link</Link>
  </NavRight>
</Navbar>

Renders to:

<div class="navbar">
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="link">Left Link</a>
    </div>
    <div class="center">My App</div>
    <div class="right">
      <a href="#" class="link">Right Link</a>
    </div>
  </div>
</div>

Slot Properties

Navbar React component (<Navbar>) has additional slots for custom elements:

  • beforeInnerSlot - element will be inserted right before <div class="navbar-inner"> element
  • afterInnerSlot - element will be inserted right after <div class="navbar-inner"> element
<Navbar 
  title="My App" 
  beforeInnerSlot={<div>Before Inner</div>}
  afterInnerSlot={<div>After Inner</div>}
/>

Renders to:

<div class="navbar">
  <div>Before Inner</div>
  <div class="navbar-inner">
    <div class="center">My App</div>
  </div>
  <div>After Inner</div>
</div>

Properties

Prop Type Description
<Navbar> properties
title string Navbar title
backLink boolean/string Adds back-link with text (if string value is specified)
backLinkUrl string Custom back link URL
sliding boolean Enables "sliding" effect for nav elements. Affects only for back-link and title elements when they are specified via props
theme string Navbar theme color. One of default colors
layout string Navbar layout theme. One of default layout themes
<NavLeft> properties
backLink boolean/string Adds back-link with text (if string value is specified)
backLinkUrl string Custom back link URL
sliding boolean Enables "sliding" effect
<NavCenter> properties
title string Specifies element inner title text (affects if there is no child elements)
sliding boolean Enables "sliding" effect
<NavRight> properties
sliding boolean Enables "sliding" effect

Navbar Events

Event Description
onBackClick Event will be triggered when click on navbar back link

Dynamic Navbar Events

Dynamic Navbar is supported only in iOS Theme

If you use Dynamic Navbar in your app then it will also have useful special events:

Event Description
onNavbarBeforeinit Event will be triggered when Framework7 just inserts new navbar inner to DOM
onNavbarInit Event will be triggered after Framework7 initialize navbar
onNavbarReinit This event will be triggered when cached navbar inner becomes visible. It is only applicaple for Inline Pages (DOM cached pages)
onNavbarBeforeremove Event will be triggered right before navbar inner will be removed from DOM. This event could be very useful if you need to detach some events / destroy some plugins to free memory