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.

Navbar Components

There are following components included:

• Navbar / F7Navbar
• NavLeft / F7NavLeft
• NavRight / F7NavRight
• NavTitle / F7NavTitle

Navbar Properties

Prop	Type	Default	Description
<Navbar> properties
inner	boolean	true	When 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
title	string		Navbar title
subtitle	string		Navbar sub title
backLink	boolean string		Adds back-link with text (if string value is specified)
backLinkUrl	string		Custom back link URL
sliding	boolean	true	Enables "sliding" effect for nav elements
noShadow	boolean	false	Disable shadow rendering for Material theme
noHairline	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
<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. By default inhertis sliding prop of parent Navbar
<NavTitle> 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 Navbar
<NavRight> properties
sliding	boolean		Enables "sliding" effect. By default inhertis sliding prop of parent Navbar

Navbar Methods

<Navbar> methods
.hide(animate)	Hide navbar
.show(animate)	Show navbar
.size()	Size navbar

Navbar Events

Event	Description
<Navbar> events
backClick clickBack	Event will be triggered after click on navbar back link
<NavLeft> events
backClick clickBack	Event will be triggered after click on navbar back link

Navbar Slots

Navbar React component (<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

<Navbar title="My App">
  <div slot="before-inner">Before Inner</div>
  <div slot="after-inner">After Inner</div>
  <div>Default slot</div>
</Navbar>

{/* Renders to: */}

<div class="navbar">
  <div>Before Inner</div>
  <div class="navbar-inner">
    <div class="title">My App</div>
    <div>Default slot</div>
  </div>
  <div>After Inner</div>
</div>

Examples

Minimal layout

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

Minimal layout with back link

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

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

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

With additional right link to open right panel

<Navbar title="My App" backLink="Back">
  <NavRight>
    <Link icon="icon-bars" panelOpen="right"></Link>
  </NavRight>
</Navbar>

All three parts

<Navbar>
  <NavLeft backLink="Back"></NavLeft>
  <NavTitle>My App</NavTitle>
  <NavRight>
    <Link icon="icon-bars" panelOpen="right"></Link>
  </NavRight>
</Navbar>

Full custom layout

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