Every navigation style has a different set of settings. Make sure you’ve chosen the appropriate navigation style before making too many changes. Read all about the different navigation styles here.
- Open your app from the My Apps dashboard.
- Select the Design tab in the left sidebar.
- Select the Yellow block Menu / Hoofdmenu.
In the rest of this article we will show you all the settings for every navigation style.
Advanced icon menu
This is the most customisable icon menu view which shows the icon and name of every block. It offers pixel by pixel control of the size and position of the icons in a grid.
In the Menu section you define how many blocks will be shown on the home screen and on which part of the homescreen they will be shown.
- Columns: The number of columns can be set to 1 through 4
- Rows: The amount of rows that can will be shown on one screen. Setting this to Auto will create one long, scrollable screen that shows all the block Icons. Example: If you have 12 blocks and you set the screen to have 2 rows and 2 columns, the home screen will be “paginated” into three screens. A small bar at the bottom of the screen will show which “page” is being viewed. The user can swipe left and right between them.
- Row Height: the height of a single row. Make this at least 44 pixels otherwise it will be too small on the screen.
The amount of Columns, amount of rows and the Row height together define the space where a single block can be shown.
- Position: Determines the starting position of the icons on the screen. You can choose between Top, Center, and Bottom. This setting also determines from which edge of the screen the Margin setting is applied.
- Size + Padding: The Columns x Rows and Row height together define the space for a single block, a.k.a a cell. With Size and Padding you can define the space with one cell where block name, icon and icon background are allowed to be shown. Small size equals large padding means small icons.
In the Text section you define the way the block name is shown on the homescreen. You can change a block name at the Content tab, select a block, at the top of the center pane.
- Size + Padding: define the part within a single ceel where the name of the block is allowed to be shown.
- Font size: The font size of the block names.
- Bold: Make the block names bold.
- Alignment : defines the place in the cell where the block names will be shown. Most of the times this will be at the bottom. You can also choose to hide the block names.
In the Icon and Icon background section you see the fields that influence the icon. The icon is the image that is uploaded at every block and shown in the top left corner of the center pane on the Content tab. The icon should make navigating through the app easy for the user because he will recognise the image and doesn't have to read the block name.
- Icon Size: Use this to set a general size for the icon. Adjusting the slider here also influences the values in the Padding section.
- Padding:To make more specific, tailored changes to the icon’s size and padding you can edit the padding for the Top, Bottom, Right and Left.
- Alignment: to define where the icon in the cel will be shown.
The Icon Background is an image that can be shown behind the icons on the homescreen. You could also upload icons for every block that already contain the icon background, but keeping them separate will give you more freedom in changing the icon backgrounds and changing the app in an instant.
- Default: Default state (color, shape) of the icon background.
- Pressed: Pressed state (color, shape) of the icon background.
- Size:Use this to set a general size for the icon background. Adjusting the slider here also influences the values in the Padding section.
- Padding: To make more specific, tailored changes to the icon background’s size and padding you can edit the padding for the Top, Bottom, Right and Left side of the icon background.
- Alignment: to define where the icon in the cel will be shown.
Read more about your home screen design here.