-
Get Started
-
React Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
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">
elementbefore-inner
- element will be inserted right before<div class="navbar-inner">
elementafter-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>