What is the Menu System
The menu system provides an accessible way to find and navigate content on the website. These user-editable menus are provided on a per-group basis and each group has exactly one menu. The users who are authorized to edit these menus will need to understand how the menu system works before making any changes to a menu.
The menu system makes many of the technical aspects of accessible and dynamic menus transparent to users. Users must never build menus for the content themselves, but instead must use the menu system described here. Using this system helps you comply with accessibility laws and helps the system make good choices when displaying or not displaying a given menu.
How the Menu System Works
Everything that is added to the menu is called a menu item. A menu is essentially a list of links. A menu is constructed entirely of menu items. Menu items typically represent some location or file on the system. Each menu has exactly one URL path assigned to it. The menu associated with a given path will only appear on pages at that given path and all sub-paths. Multiple menus are allowed to appear at a single path. Each menu item belongs to some item type that defines how, and if, that menu item is presented to the viewer.
/documentation/website. Any sub-path, such as
/documentation/website/menu-system, will show the menu. The menu will never appear on
Processing all of the menu items can take a lot of time and resources. This slows down page load times which can give viewers a bad experience. To alleviate this performance issue, the menu system implements what is called caching. When changes are made to a menu in the menu system, the cache for that menu must be cleared before the changes become visible.
Updating a Menu
The menu system settings for menus can be accessed by selecting the My Menus tab on My Workbench page. If the My Menus tab is not listed in the tabs on the My Workbench page, then there are no menus in which you are authorized to manage. The menus are sorted alphabetically. Multiple menus are allowed to have the same name, so be sure to pay attention to the menu path or the menu id that is also displayed.
Selecting a menu on the My Menus tab should bring up an edit page for that specific menu. This page can be logically broken down into three parts.
menu settingsThe menu settings provide global controls such as:
- setting the menu path
- assigning the menu weight
- enabling parent visibility
- altering the breadcrumb name
menu itemsThe menu items part is where menu items are managed. This area contains a table with the following columns:
- item name
- item type
operationsThe operations part provides links to perform specific tasks. The provided links are:
- add new menu item
- update menu
- reset cache
There are two important steps to perform when making changes to a particular menu. The first is that the Update Menu button must be clicked to save any of the changes made. The second is that the Clear Menu Cache button must be clicked in order to guarantee that the changes are displayed. If the menu cache is not cleared, then the changes that were made to the menu will not be visible for anyone to see. Use the menu item add, edit, and delete links to perform their respective operation. The ordering of the menu items can be performed on this page by dragging and dropping, by using the order weight fields, or by editing a menu item and changing its parent item and weight.
The menu settings contain a collection of options for tweaking the behavior of a menu. The most important of the menu-specific settings is the menu path. The menu path designates where all menu items associated with the menu get placed under. Some menu items may even prepend the menu path to its links. If the menu path is incorrect and you do not have access to change it, then seek support for getting the issue resolved. The advanced menu settings are: menu weight, show parents, and breadcrumb name. The menu weight defines where this menu gets displayed when more than one menu are displayed at the same url path. The show parents checkbox allows for hiding the parent menus. The breadcrumb name gives users the ability to change the name of the menu as it appears in the breadcrumbs.
Menu Item Properties
Add or editing a menu item can be simple, once all of the fields uses purposes are understood. A few of the fields are available primarily for handling exceptional cases and often may be ignore by the users. Each menu item has 5 common fields: name, parent item, weight, active path, item type, and when to expand. Name is the name of the menu item as it will be displayed on the menu. Parent item and weight are used to provide hierarchy between different menu items. The active path is used to manually specify the path in which the menu item is considered active and is usually left alone. The item type designates what this item is, how it gets presented, and also controls what additional fields are made available. When to expand designates that whether or not child menu items are displayed if the menu item has any child items.
Menu Item Hierarchy
To understand what the parent item and weight are, one needs to understand the menu item hierarchy. The menu item hierarchy is simply the parent child relationship between multiple menu items. If a menu item is to be displayed nested within another, then the nested menu item is a child menu item. The menu item that has nested menu items is called the parent menu item. Menu items that are position above or below another menu item are ordered first by menu weight and the second by the menu name, alphabetically. Menu items with a larger weight are considered heavier and therefore are positioned below menu items with a smaller weight.
There are two ways to alter a menu item's hierarchy. The first would be to manually set the parent item and manually set the weight. The second is by drag and dropping the menu items while viewing the menu settings page. For the second way, the drag and drop can be done by clicking and holding the Drag to re-order icon that is found on the far left side of each row in the menu items table. Dragging left to right will nest or unnest a menu item, which is the same as changing the menu items parent. Dragging up or down will change the menu items weight. Letting go of the menu item will place that menu item. The drag and drop method does not perform a save, so in order to save the drag and drop changes, be sure to click on the Update Menu button found in the operations area of the page.
Menu Item Types
There are different types of menu items and each provides its own fields and some even change how the standard fields are interpreted. To properly create and use menu items it is very important to understand what each menu item type is, their purpose, and how to use them. There are 7 types of menu items.
Link item types provide a link to some other page or website. Do not use this to refer to links to files, instead use the file item type. This provides the field called url. The url field is the address in which the menu item points to. The address can be absolute or relative. Absolute paths should only refer to pages on an external website (those that begin with
https://. Do not use this to point to a specific node, instead use the Node Item Type.
A label is a placeholder. It provides no link to anything, but it can provide structure and a breadcrumb path. This provides the following fields: Disabled, Clickable, and No Breadcrumb. Disabled tells the menu system to style the menu item differently to make the menu item text look like a disabled link. This can be useful if you want to create your menu structure before you create your actual pages because the pages that do not yet exist cannot have a node id. Clickable allows for expanding or collapsing the menu item (in the event that is has child items). No Breadcrumb provides a way to prevent the label from having a breadcrumb path representing that menu item.
A top is a simplified version of a link that always points to the menu path of the menu the top menu item belongs to. Top links may only be parent menu items (they cannot be nested). This has a field called Top As. This field allows for having the top be displayed as either a link or a label.
The menu type allows for importing another menu and placing it somewhere in your menu. This is an advanced field that allows for combining menus that have no parent/child relationship based on the menu hierarchy. This provides a field called menu. The menu field displays all available menus on the system. When using an imported menu, you do not have control over content inside of the menu, but you can choose to override whether or not the menu is expanded or collapsed by default.
The menu item type allows for importing a single menu item from some other menu and placing it onto your menu. This is a special purpose only field and should not be used under most circumstances. This provides a field called menu item. The menu item field only accepts the numeric id value for the menu item to be used. When using an imported menu item, you do not have control over content inside of the menu item.
- The state in which something, such as a link, is considered to be in when the url path that represents that something is currently being viewed.
- Cache refers to information that was created from performing some given task and then stored for user later on to avoid re-performing the task in which the cache represents. See also Caching.
- Caching is a method used to improvide performance by doing a specific task only one time. The idea is that if a given task must be done repeatedly and nothing has changed, then the results of performing that task will never change no matter how many times it is done. Therefore, do the task one time and then re-use the results from that task for every subsequent request to perform that task. This is used to improve performance for tasks that are done repeatedly, which happens very often on websites.
- Media Type
- A media type refers to the tools or way in which content is displayed. Common examples of different media types are: printed on paper, displayed on a projector, a computer screen, and a screen reader. Websites often need to understand what media type is in use before displaying its content.