Menus

The menu element greatly simplifies adding navigation support to your website.

There are two ways to handle the addition of menu items, automatic or manual.

Automatic mode 

Automatic mode is controlled by the “Auto-add pages” checkbox. In this mode the menu items reflect the website structure, a page becomes a menu item, a site section becomes a submenu.

The more organized the site structure is, the less effort is required to to maintain the menu. Any change to the website structure (adding, removing, moving or renaming pages or sections) is immediately reflected in the menu items. 

For example the site outline on the left will automatically become the menu structure on the right, with drop down menus:

Pages and sections you don't want in a menu can be turned off by clicking the “eye” button, which will turn the menu item gray in the settings. 

Because in automatic mode items and submenus are managed in connection with the site outline,  there are a few restrictions: 

Manual mode 

If you need a menu that is unrelated to your pages or is significantly different in structure, you can switch to manual mode by turning off the “Auto-add pages” checkbox, removing the unwanted entries and adding menus and sub-menus as you wish. 

In both modes 

Sometimes you want menu items to be shorter or just different from the page title. You can do this either editing the menu item text in the next section of the Menu settings, or by single clicking the selected item in the list. This only affects the menu, it doesn’t rename the page, and you can have the page title back by clicking “Default”.

You can change the order of menu items using drag and drop in the menu inspector, including moving a top level page in our out of a sub-menu. 

Sparkle supports horizontal or vertical top level menus, via the switch at the top of the inspector. A compact menu is also supported, and via the Devices feature you can opt to have a different menu layout on different devices.

When the inspector shows “Top Level”, the settings changes affect the entire menu and submenus (unless their “Custom settings” checkbox is set). 

When the inspector shows “Submenu”, the settings changes affect the submenu hanging off of the currently selected item.

By default submenus have the same appearance of top level menu except for size (each submenu has its own width/height that can be specified independently from top level menu). By selecting “Custom settings” you can fine tune the settings of the submenu’s text and background. 

Hover settings control the appearance of menu entries for background, border and text colors when the mouse passes over them. Hover tweaks are available for both top-level menu and submenus. 

The submenu pop-out direction and orientation can be customized separately for each submenu in a total of 16 different ways, again customizable separately on each device:

Flexibility 

Sparkle’s menu system is very customizable, all the menus below were built with different configuration options of this menu element, so do dig into the settings for different layouts and effects!

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Limitations

Sparkle doesn’t currently let you use a top level menu item as both a link and a submenu, this is because for compatibility with touch devices, where the concept of “mouse hover” doesn’t exist, a tap can either open a sub-menu or activate a link.

Only 2-levels menus are supported.

This site uses cookies. Some are essential to make our site work; others help us improve the user experience. By using the site, you consent to the placement of these cookies. Read our privacy policy to learn mode.