Navigation
Learn how to configure and design the navigation bar in the application
Last updated
Learn how to configure and design the navigation bar in the application
Last updated
The Design workflow on Mindset helps you customize the aspects of the user experience that help your end users recognize 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.
General Settings
Colors
Navigation and Layout
You can now configure the general settings of your brand’s design that include App Branding elements like Name, 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.
After this, you can navigate to the Colors tab and select the Accent Color to be displayed on your app and also add your brand colors to the Color Library which will help your users identify your branding within the app.
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 a Tab title, Tab icon, Canvas color and Body Container Color.
Please note: we recommend these tab titles be 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 customize branding aspects of your application like the Surface color, Active tab icon and text color, Active tab highlight area and Inactive tab icon and text color.
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.
