PHsPeed supports a standard horizontal menu and a vertical menu. Both components can be found on the toolbar


There is another menu next to the vertical menu which is deprecated. Do not use!


The menu's follow the principles of Bootstrap, so they are responsive. You define the collapse rules by setting the device context. If this sounds unfamiliar, then read the documentation on getbootstrap.org, or w3schools. 


There are different ideas about using menus, but most users do not want to replicate every menu and menu items in their modules. Usually to create a reusable menu, you create a building block with the menu and then assign it to one of the panels of the layout. Some users don't like the idea of having a header and footer, and want to work in one file only. In that case you can use the container principle. 

Containers


The menu items are stored as a container with a unique name. If you create a new module and add a menu, then you can use this container name for the items. That way, when you make changes to the menu, they will apply to all menus that reference that same menu.

Layout Area's


When you create a module, then a layout is applied. This layout can be accessed through the layout property of your cRoot component, or settings in your project preferences. 



In layout_1 you have a typical example of a standard horizontal menu. Here you can define the header, and footer by assigning a building block to it. So the building block must be created first, before you can assign it to a layout. The layout_2 and _3, show you how you can create a left area called 'side', where you also can apply a building block. In this case that would be a vertical menu. You also have to specify a width of that side. (PHsPeed uses the bootstrap grid for layout, but the layout is an exception and uses flexbox).


Creating menu items.


The best way to create menu's is to wait until you have some applications to put into it. We advise to wait as long as possible, as most of the time, the developer will apply many changes in application structure an functionality will developing. 


To define items the method for horizontal and vertical menu's are the same:


Open the property that contains the menu items


Add items by hand by using the toolbar buttons, or drag/drop the modules from left into the menu structure. When a menu item is selected you can change it's properties, but not add other items nested to it. So unselect if you want to add items to this menu. Due to the structure and rulse of Bootstrap you can only have one sub menu item. 


Each item can have a different definition, but in it's basics you have an url, optional, some parameters and optional an icon.


Creating building blocks


As written above, the most easy way for a reusable menu is to use a building block. To create one, select buidling block from the menu:



Here we have called it mainheader.


Then add the horizontal menu from the toolbar into the main header panel. Set the menu properties, save and apply the mainheader to all the modules that require this. If you have a lot of applications, use the bulk edit or the project properties, they will allow you to perform this task with a few mouse-clicks.