Nectar Documentation
DemoBuy Now
Search…
Introduction
Getting Started
Installation
Directory Structure
Dependencies & Plugins
The Basics
Configuration
Routes
App Layout
App Initialization
Theming
Internationalization
UI/UX
Components
Screens
Advanced
Web APIs
Cordova Plugins
Integrations
Publishing
Progressive Web App
Cordova/PhoneGap App
Powered By GitBook
App Layout
As Nectar has Single Page Application (SPA) architecture, the app shell layout is defined inside index.html

Navigation Layouts

Nectar supports two main navigation layouts widely used in apps — Hamburger and Tab Bar.
Hamburger Layout
Tab Bar Layout

Setting up Hamburger Layout

By default, Hamburger layout is set up for Nectar.
1. Open /assets/custom/js/config.js file.
2. Inside window.config.theme = { set navigation: 'hambuger'
3. Open index.html file.
4. Uncomment HTML inside <!-- Hamburger Navigation -->
5. Comment HTML inside <!-- Tab Bar Navigation -->

Setting up Tab Bar Layout

1. Open /assets/custom/js/config.js file.
2. Inside window.config.theme = { set navigation: 'tabbar'
3. Open index.html file.
4. Uncomment HTML inside <!-- Tab Bar Navigation -->
5. Comment HTML inside <!-- Hamburger Navigation -->
You can use only one type of navigation layout at a time, either Hamburger or Tab Bar.
Push State (#!) does not work for Tab Bar Layout.
The Basics - Previous
Routes
Next - The Basics
App Initialization
Last modified 3yr ago
Copy link
Contents
Navigation Layouts
Setting up Hamburger Layout
Setting up Tab Bar Layout