How to edit screens and side menus

Your app consists of screens, that are accessed through the navigation. You can expand your app by creating side menus, new navigation points and screens.

Here we’ll explore four common ways to expand your app and edit the screens:

1. Set up your side navigation
2. Edit your sub screen
3. Create an inner navigation
4. Add more screens

 

1. Set up your side navigation

Setting up your side menu is simple. Go to the App Builder view by clicking “Apps” on the left hand side menu (1A), and select the app you’d like to edit (1B).

Make sure you have “Main screen” selected on the left (1C), and scroll down until you see “Side navigation” portion on the right hand menu (1D). Here you can edit what is shown to the user in the side navigation of the app.

Activate the Side navigation from the toggle (1E).

Now a hamburger menu appears at the top left corner of the app (1F). Click it open inside the app and you can see the changes you make to it in the settings on the right side under “Side navigation” (1G).

Below the style settings, you can edit the items in the side navigation.

Edit the menu items and their icons inside the grey boxes, where each represents one menu item (1H). 

You can also add new menu items from the green “+Add item” text (1I).

Add links to the navigations from “Set navigation” (1J).

Choose your navigation type: what action would you like to link to from this button (1K).

Finally, define the specifics of the navigation (1L). In our example, the navigation leads to a web view.

You can test the navigation on a mobile device – it will open from the top left menu, or by swiping from the left side of your app to the right.

 

2. Edit your sub screen

The sub screens are shown along with articles. They have fewer elements than the main screen, and there’s no bottom navigation so there’s less space for article content. They only have one or two ways to navigate – like back and forward buttons.

You can edit sub screens in the App Builder view: go to Apps (2A) and select the app you’d like to edit from the list. Finally, navigate to “Sub screen” on the left (2B).

For example, in the template app that's in the picture, the sub screen only features the logo of the app in the “toolbar” section at the top (2C). The articles will fill the large white area below the logo. Usually, the subscreen is left as it is, but you can style the toolbar – the top of your app – to be smaller or different color, for example (2D).

The live app also features a back button on the top left corner, and a sharing icon on the top right corner, although they’re not visible here. Users can close the sub screen by swiping right.

 

3. Create an inner navigation

Inner navigation is an extra navigation that allows the user to easily browse through your app’s content. Inner navigations are typically used with feeds – like news feeds. The user can easily browse different topics, and easily jump between the feeds.

You can also add an inner navigation on top or bottom of the app, inside a feed. Go to feeds and select the feed you’d like to edit (3A, 3B).

Go to the section “Inner navigation” on the right side, and activate the Inner navigation from the toggle (3C). Edit the links from “Edit navigation” within the grey section (3D).

Define to which content the different menu items point to (3E).

You can also set whether your inner navigation is on the top or the bottom of the feed, and if the user can change the navigation by swiping (3F).

Adjust the styles for the navigation (3G).

Finally, save your feed that has the inner navigation.

 

4. Add more screens

Go to the App Builder view to add more screens: go to Apps (4A) and select the app you’d like to edit (4B).

Adding new screens allows you to create different app experiences. For example you can have two different sport teams in one app, you can make a different home, shop and news feed for each.

Click “New screen” on the left to add a new screen to your app (4C).

Build your screen on the right side: a new bottom menu, toolbar, etc. (4D)

 

There you go!

Now you can edit and expand your app with new screens and navigations.

Looking for information on specific settings?