16 - Building the app menu and navigation bar

The app menu editor is the tool in Backstage used to configure the app menu.
To open the app menu editor, go to the Backstage menu and select App menu:

The app menu editor includes the following three elements:

• The entire left side of the screen displays how the app menu will look in the app.
• The upper-right part of the screen is where you can configure modules, or add custom items and separators to the app menu.
• The lower-right side of the screen is where you can configure the Navigation bar.

Configuring the app menu 

In the left side pane of the app menu editor, Backstage users can select any app menu item.
Clicking on an item on the left displays its configuration options on the right side of the screen:

Reordering menu items

Items in the app menu can be arranged into the order that you want, by selecting the ≡ icon located to the right of the item name, and then dragging and dropping the item up or down in the list.

Displaying or hiding menu items

Backstage users can choose whether a menu item will be displayed or not in the app menu, by selecting the item to the left of the screen, and selecting VISIBLE or HIDDEN.

Note: If an item is hidden from the app menu, it will be added to the Restore hidden items list (available in the app menu editor screen), and can easily be restored to the app menu at any time.

Configuring menu items

To configure a menu item, Backstage users need to associate a label with the app menu item.

Labels contain the translation key (label identifier), the translations (the text actually displayed in the menu item, that can be in multiple languages) and the icon that is displayed for the label. There are existing labels in the drop-down list that you can choose from, and you can also create new labels:

• The translation key: The translation key works as a unique identifier for the app menu item (or label). New labels can also be created by selecting Add a new shared translation in the Label drop-down list. The system will prompt you to enter a new label ID (the i18n key), and then to add the text to be displayed in English. 

When creating a new label, the translation key should start with "section_title." followed by the title to be used, with no capitalization, special characters, or spaces.
The period "." in this string is very important so please do not forget to include it.
Spaces can be replaced with underscores.
Each app menu item must have its own separate identical key.
For example: section_title.video_breakout or section_title.agenda
Once this is done, you can add the actual text translations, i.e. the text that will be displayed for the app menu item in the app.

• The translations: This is the text that is actually visible in the app menu item in the app, including the default English text and any other languages that will be displayed if the app is using a different language than English. Existing label translations can be modified and new label translations can added by clicking on the pencil icon to the right of the label name.
  
  
• The icon: This can be modified by removing the existing icon, by clicking on the x icon to the right of the screen, and then either choosing another icon from the Icon dropdown list.
  User can also upload a new icon file to be used by clicking on the UPLOAD button to the right of the field.

Example

As an example, in the below screenshot, the menu item is currently:

• VISIBLE in the app menu.
• Associated with a label named section_title.presenters.
• This label displays the text Speakers in the app menu item.
• This label displays the Speaker icon (the microphone) in the app menu item.

The associated app menu item looks like this:

Adding custom items to the app menu

Separators in the app menu are used to structure or group certain items of the app menu together.
The separators "MAIN MENU" and "SERVICES" are included in the app menu by default.
The default separators can be removed, modified or moved around just like the other menu items, and new separators can be added if needed.

Separators are added via the Add a separator field:

The same as for the modules, when adding a separator menu item you need to configure its associated label, including its ID (the i18n key), displayed text, and translations. For more information on this refer to the section called Configuring menu items.

Adding targeting to app menu items

In the app menu editor, for some menu items, targeting can be configured to determine which specific app users will be able to see the app menu item in their workspace (or app menu).

To configure targeting on a menu item, select the item in the list on he left in the app menu editor page. Then click on the Visible to everyone icons to determine which user(s) will be able to see the item, and which user will not(s).

Note: Targeting is not possible for the following modules: Home, Agenda, Notes, Forms, Chats, Notifications, and Sponsors.

For more information on how to set targets on custom items, refer to the Creating targets in Backstage article.

Configuring the Navigation bar

The navigation bar is always located at the bottom of the screen in the mobile app, and displays shortcuts to the most commonly used functionalities in the workspace.

To make changes to the navigation bar:

1. Go to Design > App menu editor in Backstage.
2. Scroll down to the Navigation bar section.
3. Choose which app menu items you want to display in the toolbar, using the drop-down lists under each icon.
4. Click Save.

Important: When an app menu item is added to the navigation bar, it will automatically be removed from the app menu in the mobile app, to avoid duplicating buttons between the navigation bar and the app menu.

You can choose up to three configurable items to be displayed in the navigation bar.

Tip: If you have two or more of the navigation bar items that are pointing to the same selection (for example multiple items pointing to Agenda or Notifications), then only one of those items will remain saved in the navigation bar. This can actually be used in order to remove any unwanted items from the navigation bar, simply by making the item that you want to remove point at a selection that is already used by another item.

The Home and More items are by default displayed in the Navigation bar (except when using Android apps, where the More item may be located up in the left corner of the screen).

For more information on configuring and designing the navigation bar, please refer to the Navigation bar design article.

Configuring the profile header in the app menu

The app user's profile (with photo and personal information) can be displayed in the app menu, and a banner can be included in the background.

To configure the profile header in the app menu editor, click on Profile above the list of app menu items on the left of the screen.

The following fields will appear on the right side of the screen:

Here you can:

• Select VISIBLE or HIDDEN, to determine whether the app user profile should be displayed in the app menu or not.
• Select an option in the Open drop-down list, to add a link to the user profile section and determine where the link will point to when app users click on their profile header.
• Select an option in the Subtitle drop-down list, to add a subtitle below the app user's name.
• Check or uncheck the Hide profile photo box, to display or hide the app user's photo in the profile header.
• Select an existing banner to be displayed using the Banner drop-down list, or upload a new one by selecting UPLOAD.
  The recommended size for a banner is 1500x500px. Please refer to the App design templates article for more information on creating banners.
• Select a degree of transparency for the banner, using the Banner overlay transparency field.