Navbar React Component

Navbar React component represents Navbar component.

• NavLeft / F7NavLeft
• NavRight / F7NavRight
• NavTitle / F7NavTitle
• NavTitleLarge / F7NavTitleLarge

Navbar Properties

Navbar Events

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
• 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
• - element will be inserted in navbar’s large title text element

Examples

Minimal layout

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

Minimal layout with back link

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

With large title

{/* with different large title text */}
<Navbar title="My App" backLink="Back" large titleLarge="Large Title"></Navbar>

All three parts

Full custom layout

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