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.