The app menu editor is the tool in Backstage used to configure or build the app menu.

To open the app menu editor, go to the Design category in the main 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 to
displays its configuration options on the right side of the screen:

Reordering app menu items

Items in the app menu can be arranged into the order that you want. Select the ≡ icon located to the right of an item name to move the item up or down in the list.

Displaying or hiding app menu items

Backstage users can choose whether a menu item listed in Backstage will be displayed or not in the app, 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 app menu items

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

Labels determine the text displayed in the menu item, any available translations for the displayed text, and the icon that is shown.

• The text: Text in existing labels can be modified by clicking on the pencil icon to the right of the label name. 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.

Note: The i18n key should start with "section_title." followed by the title to be used, with no capitalization, special characters, or spaces. Spaces can be replaced with underscores.

• The translations: These are the translations associated with the label text, and 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 resulting app menu item looks like this:

Adding custom items to the app menu

In addition to the existing workspace modules, custom items can be added to the app menu and be configured in a similar manner.

In the app menu editor screen, click on the Add a custom item drop-down list to display the available options:

Adding a separator 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 app, and displays shortcuts to the most commonly used functionalities in the workspace.

To enable and configure the toolbar:

1. Go to the 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

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

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, displaying their photo and personal information, can be edited 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.