# Navigation

## Overview

The flow of navigation for an app is generally as follows:

*Splash Screen -> Walkthrough Screen (For First-Time Users) -> Authentication Screen (If Required) -> Home Screen*

Nectar follows the same convention by default. But you can change the flow completely by configuring some parameters.

1. Open `/assets/custom/js/config.js`
2. Inside `window.config.navigation` object, you can make changes.

## Splash Screen

```javascript
splash: {
    enabled: !Framework7.device.standalone && !Framework7.device.cordova
}
```

The above code means that when a user visits your web app via web browser URL, the custom splash screen is shown. This custom splash screen is not native but just an HTML page defined in `/partials/screens/splash.html`

If the app is installed on user home screen or the app is Cordova based, then this custom splash screen is not shown. Instead native splash screen is shown defined in `manifest.json` or `<meta>` tags for PWAs and `config.xml` for Cordova.

Splash is mandatory for Cordova, optional for PWAs (In PWAs, splash screens are automatically created from the `manifest.json` or `<meta>` tags.)

If you want to disable splash screen for the website, then set:

```javascript
splash: {
    enabled: false
}
```

## Walkthrough Screen

Nectar comes with a Walkthrough screen, which is defined in `/partials/screens/walkthrough.html`

If you want to disable walkthrough screen, then set:

```javascript
walkthrough: {
    enabled: false
}
```

By default, this walkthrough screen is enabled, and shown to the user when the web app is installed and opened for the first time. After that the walkthrough screen is not shown.

If you want to always show the walkthrough screen, then set:

```javascript
walkthrough: {
    showFirstTimeOnly: false
}
```

## Log In Screen

If your app needs user authentication, then set:

<pre class="language-javascript"><code class="lang-javascript"><strong>authentication: {
</strong>    required: true
}
</code></pre>

If you want to present the user with Log In screen as the app starts, then set:

```javascript
authentication: { 
    guestAccess: false // If true, the app will skip the Log In screen.
}
```

Even if your app needs user authentication, there are some screens which should be accessed by guest users. You can define such screens inside:

```javascript
authentication: {
    ignoreRoutes: []
}
```

### Home Screen

By default, the home screen is set to `'./partials/screens.home.html'`

You can change it to other screen, for example,

```javascript
home: {
    url: './partials/screens/dashboard.html'
}
```