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.
<Navbar title="My App"></Navbar>
Renders to:
<div class="navbar">
<div class="navbar-inner">
<div class="center">My App</div>
</div>
</div>
<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>
<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>
<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>
<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>
<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>
Navbar React component (<Navbar>) has additional slots for custom elements:
<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>
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 |
Event | Description |
---|---|
onBackClick | Event will be triggered when click on navbar back link |
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 |