Building Custom Menus

 

Menu Attribute
Overview

The Menu attribute is a unique attribute type used to build custom menus. Like the menus accessed via the built-in button targets, custom menus are also used to query and display a list of members based on specific criteria, such as assigned attributes or attribute values. To learn how to create a menu attribute, see the Create a Menu Attribute topic. The top level of a custom menu is rendered as a single button on a module's main menu, with each subsequent level rendered as a list of buttons on a new page. When an end-user selects a button from the last level of the menu, the resulting list of members is displayed.

Menus can have multiple levels to organize data into smaller, more manageable sets. As illustrated in the Sports example below, rather than displaying a long list of all sports when the button is selected, the second level is set to display categories of sports including Men's Sports, Women's Sports, and Mixed Sports; which, when selected, then display only the sports nested within their respective level (see Mixed Sports in the illustration below). As a rule of thumb, the fewest menu levels possible should be used. The fewer the number of steps it takes for an end-user to access the desired content, the better.

When a group or list attribute is added to a menu only the attribute itself is added or referenced, not each individual attribute nested within it.  When a menu attribute is added inside another menu its nested attributes are also added. However, while the inserted menu's structure is initially maintained, all references to the original attribute's structure are broken. Therefore, each nested attribute can be relocated, removed, or duplicated without affecting the original attribute.  Likewise, with the exception of each attribute's name, any changes made to the original group, list, or menu attribute will not affect the instances nested within a menu. 

 

Select Attributes to Include Panel

Click the Select Attributes to Include panel header to expand the panel, and then select the attributes to be included in the menu.

 

NOTE: When an attribute is already checked, clicking it will display a context menu with options to Add/Duplicate an instance of the attribute, or to Remove all instances of the attribute.

Top Level

The top level represents a single button that can be assigned to a module's main menu on the Modules tab. The name of the top level panel, which is the attribute's name, will be displayed in a select menu on the Modules tab, where it can be assigned to a main menu button. Click the panel to expand it and to change options (see Menu Panel Options below), or click an Action Icon to perform a specific task.

Additional Levels

All subsequent levels are indented one space to the right of their parent level. Each panel within a level represents a button that will be displayed in the interactive when a user clicks its parent. Click the panel to expand it and to change options (see Menu Panel Options below), or click an Action Icon to perform a specific task.

Action Icons

Move. Click, drag, and release to change the order of the panel or to move it to a new level. Once a panel has one or more children it must be expanded to display its nested children in order to add or relocate another panel inside of it.

Display Options. Click to toggle the display of panel specific options (see Menu Panel Options)

Display Nested Children. Click to toggle the display of nested panels (buttons). Once a panel has one or more children it must be expanded in order to add or relocate another panel inside of it.

Add Child. Click to add a child attribute. This is equivalent to checking an attribute checkbox from the Select Attributes to Include panel.

Clone. Creates a duplicate panel, including all options and all nested children. This is equivalent to clicking an already checked attribute on the Select Attributes to Include panel and selecting the Add/Duplicate option from the context menu.

Delete. Removes the panel and all nested children from the menu. This only removes the active panel and its children. Click the attribute on the Select Attributes to Include panel and select the Remove all instances option from the context menu to remove all instances of an attribute from the menu.

 

 

Menu Panel Options

Toggle Menu Options

Click the panel to toggle the display of panel specific menu options.

Layout

Select how the buttons are to be displayed. Buttons can be displayed as Labels or as Icons. In order for icons to be rendered, they must be assigned under each nested attribute's advanced options panel.

Sort Method

Select whether to sort the nested attributes alphabetically or manually.

 

NOTE: Dragging a panel to a new location will automatically configure its parent to sort nested items manually.

Label Override Options

Label override options vary between the top level (illustrated above) and nested levels, as illustrated here:

 

Button Label

Applies to nested levels only. By default, the button label is the name of the attribute. Enter a different label name here to override the default label. This option is not available at the top level, which is defined on the Modules tab when assigning the attribute as a main menu button.

Breadcrumb

The breadcrumb is displayed in a smaller type face above the main title on each page. By default, the breadcrumb matches the module instruction for the top level, as defined on the Modules tab, and matches the nearest parent label for each subsequent level. To override the default value, enter the desired breadcrumb.

Title

The title is displayed at the top of the page when a button is selected, and matches the button/attribute name by default. To override the default value, enter the desired title.

Description

Applies to nested levels only.

 

 

Description Overlay

The Description is displayed at the top of the page when an end-user touches an Information Icon.

Information Icon

When a Description is entered an Information Icon will be displayed next to the associated button in the interactive. When an end-user touches an Information Icon, the associated Description is displayed at the top of the page.

 

Description Columns

Applies to nested levels only. Breaks the Description into the selected number of columns. When the Description is long, breaking it up into multiple columns can make it easier to read and comprehend.

 

 

Layout Options

Layout options are available for parent panels only, and determine how its children are laid out on the page.

 

Columns:
Determines the number of columns to render on each page. If button labels are long, rendering fewer columns can prevent them from getting cut off. This option is not available for icon layouts.

Rows:
Determines the number of rows to render on each page. This option is not available for icon layouts.

Arrange top to bottom:
Arranges buttons from top to bottom, filling each column first from from top to bottom and then left to right.

Arrange left to right:

Arranges buttons left to right, filling each row first from left to right and then top to bottom.

 

NOTE: The layout options outlined here pertain only to the layout of the menu buttons. The layout of the resulting list of members is based on the selected member layout and layout options as configured configured on the Modules tab.