By using the 'Navigation Menu' entry of the Toolset or the menu command 'Insert -> Navigation Menu', you can place the menu on the website. Once you placed your menu, you can click the 'Edit text here' text and enter new menu entries directly in the editor. It is possible to select a font, color and font size for each menu entry individually. If you want to change the font for multiple menu entries at once, simply select one menu entry, hold down the 'Shift' key on your keyboard and click other menu entries to select them as well. Then, you can choose a new font as usual.

Special Entries

The menu supports horizontal lines as menu entries. Simply set the text of a sub menu to "-" (=a minus symbol), and if you click 'preview' to view your website in the browser, this menu entry will appear as a horizontal line.

Properties

This component supports several background modes (Color, Image, Gradient), changeable by selecting the property 'BackgroundMode'. It also supports several border modes. The background will only be visible if the image files cannot be loaded or the currently shown image is transparent. If you want even different backgrounds, simply set the background and border to trnasparent and invisible and place any other element behind the menu bar.

Other supported properties are:

Padding: Space in pixels between menu entries
SubMenuSpacing: Vertical space in pixels between sub menu entries
Pane Background color: Color for the background of the dropdown menu pane.
Pane Border color: Color for the border of the dropdown menu pane.
Use CSS Shadow: Draws a shadow around the dropdwon menu pane. This looks very nice, but only is visible on newer browsers which support this feature.
Use Hover Styles: If checked, the main menu entries in the horizontal bar show hover colors when the mouse moves over them.
Hover Background Color: Background color of a main menu entry when the mouse is over it.
Hover Text Color: Text color of a main menu entry when the mouse is over it.
Hover Pane Background Color: Background color of a sub menu entry when the mouse is over it.
Hover Pane Text Color: Text color of a sub menu entry when the mouse is over it.
Mobile Menu: See the section below
MenuAlignment: Where the top menus are aligned to: Left, Right or Center. Make the menu a full with o 100% and set this to align right, then your menu will always look nicely aligned to the right, no matter the screen size.
MenuAnimations: Enable this to select from a few animation options below which are used when the menu is opened in the website.
Advanced Settings: Click the "..." button here for more options, like:

OpenCloseWhenClicked: You can select if the menu will close when clicked on it again, or open via mouse hovering on desktop or not. Some people find it more natural with the second mode, so that you can easily close the menu again by clicking on the top menu.

Mobile Menu

Each navigation menu comes with a second menu, which is shown on smaller screens, if the property "MobileMenu" is set to 'Automatically Generated' or 'Manually Filled'. You can see this mobile menu in Rocketcake if you drag the view slider on the bottom of the page to a small area, or if you select a mobile device on the bottom combo box, like for example "iPhone 7". By default, this menu is generated from your 'Desktop' menu, but when set to the 'Manually Filled' mode, you can edit this mobile menu just like the normal menu.

The advantage of this second menu is that you can arrange the menu items in a more compact way in that menu, so that everything fits on the screen also on mobile devices.

Shadow For the Menu

You can make the dropdown menu have a shadow. For that, just open the menu, right-click onto it, and select "Box Shadow". There you can enable and edit shadows for the dropdown menu.

Round Edges for Navigation Panes

It's possible to create round navigation menu panels. For that, simply set "edges" of your navigation menu to "round", and check the option "RoundEdgesAlsoForPanes". Then your navigation menus are also round.

If you don't want the top menu bar to have round edges as well, simply make its background transparent and place it into a container of which you then apply the background you want to have for your top menu.

Centering the Menu

The menu itself is always right aligned. But in some cases, you might want it to be centered.

To do this, you can simply set the property "MenuAlignment" to "Center":

Done: You now have a centered menu.

Icons in the Menu

You use icons in the menu and the menu entries. Simply drag an image element into the menu at the place you want it to have, or alternatively create an image somewhere on the page, and then copy and paste it into the right position in the menu:

Be sure to have the icons at about the same size as your text so that it looks correctly in the website.