All websites need links between pages because, unlike the Sparkle editing environment, browsers don’t show thumbnails or site-wide links on the side. Links between the pages are commonly known as “navigation”.

The menu element greatly simplifies and partly automates adding navigation to your website, in that it can automatically create a link for each page, or drop-downs with lists of links.

While a menu element only shows on one page by default, you can combine it with the “Show in all pages” arrange option to create site-wide navigation with a few clicks.

In Sparkle menus there are two kinds of items: items that link to a page (or other link), and items that link to a sub-menu (that will appear in the page).

Before getting into details about how menus can be set up, it’s important to note that they’re only a convenience and a shortcut to set up navigation. You can also use text links, images or buttons, buttons can be used in combination with popups to create full screen menus or submenus.

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 sections and pages: 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 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:

  • you can’t remove items or submenus, you can hide them, though;
  • you can’t attach a manually-added submenu to a managed item, but you can manually add a new item and attach a submenu there.

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

Items in a menu bar strip can either all have the same size, or they can have a width that's calculated based on the text they contain. This can be done by unchecking the "Same size" checkbox.

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 or 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 setting changes affect the entire menu and submenus (unless their “Custom settings” checkbox is set).

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

By default submenus have the same appearance as top level menus 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 take advantage of the settings for different layouts and effects!

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. If you need more flexibility you can use popups.

The menu settings

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

Updated for Sparkle 5.2

Made with Sparkle

Copyright © Crinon SRL 

This website makes use of cookies.

Please see our privacy policy for details.

It’s Okay

Deny