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.

There are following components included:

  • Navbar / F7Navbar
  • NavLeft / F7NavLeft
  • NavRight / F7NavRight
  • NavTitle / F7NavTitle
  • NavTitleLarge / F7NavTitleLarge
PropTypeDefaultDescription
<Navbar> properties
innerbooleantrueWhen 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
titlestringNavbar title
subtitlestringNavbar sub title
backLinkboolean
string
Adds back-link with text (if string value is specified)
backLinkUrlstringCustom back link URL
slidingbooleantrueEnables "sliding" effect for nav elements
noShadowbooleanfalseDisable shadow rendering for Material theme
noHairlinebooleanfalseDisable navbar bottom thin border (hairline) for iOS theme
hiddenbooleanfalseMakes navbar hidden
innerClassstringAdds additional class to navbar-inner element
largebooleanEnables navbar with large title
titleLargestringNavbar large title text. If not specified then will be equal to title prop
<NavLeft> properties
backLinkboolean
string
Adds back-link with text (if string value is specified)
backLinkUrlstringCustom back link URL
slidingbooleanEnables "sliding" effect. By default inhertis sliding prop of parent Navbar
<NavTitle> properties
titlestringSpecifies element inner title text (affects if there is no child elements)
subtitlestringSub title text
slidingbooleanEnables "sliding" effect. By default inhertis sliding prop of parent Navbar
<NavRight> properties
slidingbooleanEnables "sliding" effect. By default inhertis sliding prop of parent Navbar
<Navbar> methods
.hide(animate)Hide navbar
.show(animate)Show navbar
.size()Size navbar
EventDescription
<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 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
  • nav-left - element will be inserted in navbar's left element
  • nav-right - element will be inserted in navbar's right element
  • title - element will be inserted in navbar's title element
<Navbar title="My App">
  <a href="#" slot="nav-left">Left Link</a>
  <a href="#" slot="nav-right">Right Link</a>
  <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="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

<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>

{/* or */}

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

With large title

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

{/* with different large title text */}

<Navbar title="My App" backLink="Back" large titleLarge="Large Title"></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>