Nectar Documentation
DemoBuy Now
  • Introduction
  • Getting Started
    • Requirements
    • Installation
    • Directory Structure
    • Dependencies & Plugins
  • Basics
    • Configuration
    • Routes
    • Layout
    • Navigation
    • Initialization
    • Theming
    • Internationalization
    • Store Management
  • UI & UX
    • Components
      • Accordion
      • Action Sheet
      • Audio
      • Autocomplete
      • Badge
      • Breadcrumb
      • Button
      • Card
      • Chart
      • Checkbox
      • Chip
      • Color Picker
      • Content Block
      • Data Table
      • Date-Time Picker
      • Dialog
      • Dropcap
      • Elevation
      • Embed
      • Empty State
      • Expandable Card
      • Flip Card
      • Floating Action Button
      • Form Input
      • Form Validator
      • Gauge
      • Grid
      • Icon
      • Image
      • Image Compare
      • Image Hotspot
      • Infinite Scroll
      • Keypad
      • Line Divider
      • List Index
      • List View
      • Marquee
      • Menu
      • Menu List
      • Navbar
      • Note
      • Notification
      • Pagination
      • Photo Browser
      • Picker
      • Popover
      • Popup
      • Preloader
      • Progress Bar
      • Pull-to-Refresh
      • Quote
      • Radio
      • Range Slider
      • Rating
      • Ribbon
      • Searchbar
      • Sheet Modal
      • Show More/Less
      • Side Panel
      • Signature Pad
      • Skeleton
      • Smart Select
      • Sortable List
      • Stepper
      • Subnavbar
      • Swipeout
      • Swiper Slider
      • Syntax Highlighter
      • Tab
      • Text Editor
      • Timeline
      • Timer
      • Toast
      • Toggle
      • Toolbar
      • Tooltip
      • Tour Guide
      • Tree View
      • Video
      • Virtual List
    • Screens
      • Splash Screen
  • Advanced
    • Web APIs
      • App Badging API
      • App Shortcuts API
      • Battery Status API
      • Clipboard API
      • Contact Picker API
      • Device Memory API
      • Device Orientation API
      • File API
      • Fullscreen API
      • Geolocation API
      • Get Installed Related Apps API
      • HTML Media Capture API
      • Local Storage API
      • Network Information API
      • Notifications API
      • Online & Offline Status API
      • Page Visibility API
      • Permissions API
      • Picture-In-Picture API
      • Quota Estimation API
      • Screen Orientation API
      • Screen Wake Lock API
      • Server-Sent Events API
      • Session Storage API
      • Vibration API
      • Web Share API
    • Cordova Plugins
      • Battery Status
      • Build Info
      • Camera
      • Contacts Info
      • Device
      • Dialogs
      • Fingerprint Authentication
      • Geolocation
      • In-App Browser
      • Media Capture
      • Network Information
      • Social Sharing
      • Splash Screen
      • SQLite
      • Status Bar
      • Vibration
    • Integrations
      • AlaSQL
      • Disqus
      • Embedly
      • Facebook Comments
      • Google AdMob
      • Google Maps
      • Google Sheets
      • Gravatar
      • Lottie
      • Mailchimp
      • QR Code
      • RSS
      • Telegram Comments
      • WordPress
      • YouTube
  • Publishing
    • Progressive Web App
    • Cordova App
  • Help
    • Changelog
    • Support
    • Customization
  • Tutorials
    • How to Create and Animate an SVG Image Using JavaScript
Powered by GitBook
On this page
  • Overview
  • Types of Layouts
  • Single View Layout
  • Set Single View Layout as Default
  • Set up Sidebar Menu for Single View Layout
  • Set up Tabbar Menu for Single View Layout
  • Set up Tabbar Routes for Single View Layout
  • Tab View Layout
  • Set Tab View Layout as Default
  • Set up Sidebar Menu for Tab View Layout
  • Set up Tabbar Menu for Tab View Layout
  • Show & Hide Sidebar
  • Show & Hide Tabbar
  1. Basics

Layout

PreviousRoutesNextNavigation

Last updated 2 years ago

Overview

Nectar is a Single Page Application (SPA). Therefore, the entry point to every browser request is index.html

In an SPA, only a single web page is loaded, called the app shell, and the consecutive pages are loaded inside this app shell using XMLHttpRequest and Fetch, without loading whole new pages from the server.

In Nectar, this app shell layout is defined inside /partials/app.html

Types of Layouts

Nectar provides two main types of navigation layouts which are widely used in apps — Single View Layout and Tab View Layout.

In Single View Layout, the app is mainly navigated using a off-canvas sidebar. Optionally, a bottom tabbar at /home/ can also be present for secondary navigation.

In Tab View Layout, the app is mainly navigated using a bottom tabbar. Optionally, a sidebar can also be present for secondary navigation.

The Single View Layout is based on , while the Tab View Layout is based on .

The major difference between Single View Layout and Tab View Layout is that,

In Single View Layout, you can access any inner route directly from the browser address bar, for example, and this will open the About screen.

But if you access this in Tab View Layout, then this will always open the first route (/) instead.

You can configure and set up your app layout using the configuration variables present inside /assets/custom/js/config.js

By default, the app is set to Single View Layout for PWAs and Tab View Layout for Cordova.

Single View Layout

Set Single View Layout as Default

  1. Open /assets/custom/js/config.js

  2. Inside window.config.layout = {

  3. Set default: 'singleView'

  4. Inside singleView object, you can enable or disable the sidebar and tabbar, by setting the enabled value to true or false respectively.

Set up Sidebar Menu for Single View Layout

The layout for Sidebar Menu is defined inside /partials/sidebar.html

You can change the sidebar menu items as per your requirements.

This Sidebar Menu is common for both Single View Layout and Tab View Layout.

Set up Tabbar Menu for Single View Layout

The layout for Tabbar Menu is defined inside /partials/tabbar.html

You can change the tabbar menu items as per your requirements.

Set up Tabbar Routes for Single View Layout

Once you have changed the tabbar menu items, you will also need to change routes for them.

  1. Open /assets/custom/js/routes.js

  2. Inside if (window.config.layout.default == 'singleView' && window.config.layout.singleView.tabbar.enabled) {

  3. Change the path parameter value according to the changes you made in /partials/tabbar.html

Tab View Layout

Set Tab View Layout as Default

  1. Open /assets/custom/js/config.js

  2. Inside window.config.layout = {

  3. Set default: 'tabView'

  4. Inside tabView object, you can enable or disable the sidebar, by setting the enabled value to true or false respectively.

Set up Sidebar Menu for Tab View Layout

The layout for Sidebar Menu is defined inside /partials/sidebar.html

You can change the sidebar menu items as per your requirements.

This Sidebar Menu is common for both Single View Layout and Tab View Layout.

Set up Tabbar Menu for Tab View Layout

  1. Open /partials/app.html

  2. Inside <template> ${$f7.config.layout.default == 'tabView' && $h`, define the tabbar menu items.

  3. Inside <script> if ($f7.config.layout.default == 'tabView') {, change the url parameters for each view, as per the tabbar menu items you have defined in the above step.

Show & Hide Sidebar

You can control the Sidebar by using following functions:

// Show Sidebar
app.sidebar.show();
// Hide Sidebar
app.sidebar.hide();
// Toggle Sidebar
app.sidebar.toggle();

Show & Hide Tabbar

You can control the Tabbar by using following functions:

// Show Tabbar
app.tabbar.show();
// Hide Tabbar
app.tabbar.hide();
Framework7's Single View
Framework7's Multiple Views
https://nectar.website/demo/about