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

On this page

Navigation Layouts

Setting up Hamburger Layout

Setting up Tab Bar Layout