Navigation

Learn how to configure and design the navigation bar in the application

The Design workflow on Mindset helps you customise the aspects of the user experience that help your end users recognise and connect with your brand from the very first interaction they have with your application.

You can configure the design of your application from the Design tab on the left hand configuration menu. There are three tabs within the Design tab.

1. General Settings

2. Colours

3. Navigation and Layout

General Settings You can now configure the general settings of your brand’s design that include App Branding elements like Your App Icon and the Loading Spinner style.

You have the option to choose to add a full logo to be displayed on large screens instead of the app icon and include your app logo at the top of your home screen. Depending on your brand design, you can enable or disable these options.

Next, you can choose the style for your Loading Spinner from the various options available.

Colours

After this, you can navigate to the Colours tab and select the Accent Colour to be displayed on your app and also add your brand colours to the Colour Library that will help your users identify your branding within the app.

Navigation and Layout

This tab allows you to configure how the app layout looks and how your end users can navigate through your app. You also have the option to choose if you want to use a dark theme within your app or not.

The next aspect within this tab is Primary Navigation. This area allows you to configure navigation tabs on your application.

Click on Configure, to configure each of these tabs. You can add Tab title, Tab icon, Canvas colour and the Body Container Colour.

Please note: we recommend these tab titles are kept short, as they need to work on both mobile and web applications.

Go to the Workflows tab to configure what you want to add to the navigation tab you are configuring. You can add, remove and choose the order of these workflows to be displayed under this navigation tab.

The next aspect under the Navigation and Layout tab is Navigation Styling. You can customise branding aspects of your application like the Surface colour, Active tab icon and text colour, Active tab highlight area and Inactive tab icon and text colour.

Once you have all these options configured, you can see the preview on the right hand side of the Navigation and Layout tab.

You can also see how the preview looks on different devices by clicking on Preview by device size.