This page explains how to add a custom menu bar to your application, to provide navigation and options for the application user.

Overview

You can add navigation or actions to individual screens by adding components. To add menu that appears on every screen you can:

Overview

PhixFlow allows you to create navigation menus that always appear. This allows for a single menu to be setup that can be accessed from any point in an application. It is also possible to setup a menu that only displays when called, for example if you create a configuration menu for your application that is only shown when the user clicks a button.

An application menu, in version 9.0+ of PhixFlow, is configured as a screen and as such can be positioned in different places on the screen.

Template menus are provided within the Template Packages that are styled to fit with the look and feel of the rest of the items in the template package. See Installing Template Packages if you need to install one.

Create a Custom Menu

Click  Insert excerpt_app_menu_bar_app_menu_barnopaneltrue to create a new screen. In the pop-up menu, select the location for the menu bar.
Image Removed
1. Select a blank menu or a template. Menu's are set to Open on Startup automatically.
2. PhixFlow prompts you to enter the name and description for the menu bar.
3. Specify the the dimensions of the menu bar in percentages or pixel's. For example:
   

   • vertical dimensions:

     • width: 100%

     • height: 50px

   • horizontal dimensions

     • width: 200px 

     • height: 100%

4. Click Confirm.
5. PhixFlow opens a new screen canvas on the left and the palette on the rightFrom the Screens home page click Add New.
6. Complete the details:
   1. Name, indicative of the menu being created.
   2. Open Maximised, Untick. We will specify the size of our menu later.
   3. Menu section, scroll through the templates and click on the desired navigation menu.
   4. Image Added
7. Click Create Screen.
8. The screen opens
9. Click Properties from the toolbar.
   1. Untick Allow Manual Resizing
   2. Position, this should be set to Pinned to... the position of your menu. For example Pinned to Top.
   3. Height / Width, set the height or width for your menu item.
      1. Typically 45px height for top menus and 250px width for side menus. However you can amend these to suit your design. 
      2. Note that for horizontal menus dropdown buttons will not work. We are working hard to improve this in a future release. If you need a menu with dropdowns see Startup Actions.
10. Save your changes, and it will be necessary to close and reopen the menu to see the updates.

Adding Menu Options

To add a top-level menu option that will buttons to your navigation menu that open a screen:

1. Open Find the screen in the repository to show the list of screens.
2. Drag a the screen -name from the repository onto the menu bar.PhixFlow prompts you to add the Display Name text you want to appear in the menu. By default, the text is the screen's name.
3. Provide a display name for the button and continue
4. PhixFlow adds the menu option button and automatically creates the actionflow.
   
   1. The action flow can be edited by right clicking the button and selecting Display Actionflow. See Understanding Actionflows for more information on editing actionflows.
5. When a user clicks the optionmenu button, the screen opens automatically.

Automatically Display a Menu

To automatically show a navigation menu when an application starts up we use, Startup Actions, which are set to run when an application opens:

1. In the repository navigate to the startup section and add a new startup action using the 

   Insert excerpt
   _add _add nopanel true

    button.
2. Tick Default Desktop Action, if you want this to be for desktop devices.
3. Tick Default Mobile Action, if you want this to be for mobile devices.
4. Action Method, select the actionflow that opens your navigation menu screen. If you hae not yet created one use the 

   Insert excerpt
   _add _add nopanel true

    button to do so. Help on this topic can be found in Understanding Actionflows.
5. Save your changes and now when you open your application the avigation bar will appear.