Layout & Navigation

This guide explains how to configure and set up app layout and navigation.

Nectar is a Single Page Application (SPA). Therefore, the entry point to every browser request is /www/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 /www/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 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 Framework7's Single View, while the Tab View Layout is based on Framework7's Multiple Views.
You can configure and set up your app layout using the configuration variables present inside /www/assets/custom/js/config.js
Single View Layout
Set Single View Layout as Default
1.Open /www/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 /www/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 /www/partials/tabbar.html
You can change the tabbar menu items as per your requirements.
Tab View Layout
Set Tab View Layout as Default
1.Open /www/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 /www/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 /www/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 step 2.

The Basics - Previous

Routes

Next - The Basics

App Initialization

Last modified 8d ago