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**
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
.hide(animate) Hide navbar
.show(animate) Show navbar
.size() Size navbar
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 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
1. <Navbar title="My App">
2. <div slot="before-inner">Before Inner</div>
3. <div slot="after-inner">After Inner</div>
4. <div>Default slot</div>
5. </Navbar>

7. {/* Renders to: */}

9. <div class="navbar">
10. <div>Before Inner</div>
11. <div class="navbar-inner">
12. <div class="title">My App</div>
13. <div>Default slot</div>
14. </div>
15. <div>After Inner</div>
16. </div>

Examples

Minimal layout

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

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

Without “sliding” transition effect (affects iOS theme only)

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

1. <Navbar title="My App" backLink="Back">
2. <NavRight>
3. <Link icon="icon-bars" panelOpen="right"></Link>
4. </NavRight>
5. </Navbar>

All three parts

1. <Navbar>
2. <NavLeft backLink="Back"></NavLeft>
3. <NavTitle>My App</NavTitle>
4. <NavRight>
5. <Link icon="icon-bars" panelOpen="right"></Link>
6. </NavRight>
7. </Navbar>

Full custom layout

1. <Navbar>
2. <NavLeft>
3. <Link>Left Link</Link>
4. </NavLeft>
5. <NavTitle>My App</NavTitle>
6. <NavRight>
7. <Link>Right Link</Link>
8. </NavRight>
9. </Navbar>