How to set up the navigation bar


As of version 3.12.0 of the apps, the navigation will be changed. Like so many other apps already do, we are also going to use what is called a bottom navigation bar. This blog post details the implications of this change

The bottom navigation bar

A bottom navigation bar is a fixed bar with a number of items at the bottom of the screen. By tapping an item in the bar, you can switch pages. Popular apps such as Instagram, YouTube and Netflix also use this method of navigation. The bottom navigation bar ensures that the most important parts of the app are always easy to reach. In Socie apps older than version 3.12.0, a user had to open the menu on the left side each time to switch modules. In the new way of navigating, this is only necessary if you want to open a module that is not in the navigation bar. The community administrator can set which modules are displayed in the navigation bar. To do so, in App Management, go to Settings -> Menu -> Bottom Navigation Bar. By default, the first 3 modules and the notifications page are displayed in the navigation bar.

screenshot bottom bar

The new menu

The rightmost item of the lower navigation bar is the menu. This menu uses the same icon as the old menu that was at the top left of the screen. The menu is largely the same, but there is one important change. The use of the community’s secondary color has changed. Previously, this color was used as the background color of the menu. Since the app primarily uses pages with a white background, we chose to do the same in the menu. The secondary color of the community, if dark enough, is now used for the icons of the items listed in the menu. The administrator of a community can change the secondary color in the App Administration via Settings -> Formatting -> Colors.

We would advise any community administrator to look in the App Administration to see what the bottom navigation bar and the new menu will look like. The navigation bar settings can be found in the App Manager via Settings -> Menu -> Bottom Navigation Bar.

The settings regarding the set colors can also be found in the App Administration via Settings -> Formatting -> Colors. There you can also immediately see how it will look in the app.

Read more

William van Rijn

Bring your community to fruition
with the Socie App

Questions? Please feel free to contact William to discuss the possibilities
that Socie can provide to your community.

This is a staging environment