Bridgeline Digital Logo
Menu

Create Menu content

The Menu content type is used to create navigation menus for your site. Typically, a site has at least one menu to navigate between pages.

You can do the following with OrchestraCMS menus:

Use multiple content templates to display the same menu in different ways.

Unlike other content types, a Menu content item shares content between content templates. For example, you can structure your menu items and links using the Class Styled Menu content template, and if the Mega Menu content template is also assigned, it is automatically populated with the same menu items and links.

  • Manage sub-level menus as separate content items. To create sub-level menus in the content editor, you can drag menu items to the appropriate locations in the menu hierarchy. You can split a sub-level menu from a larger menu to manage it as a separate content item or, similarly, link a menu item to another existing menu—either way, the two menus display as a single menu when the parent menu is added to a page. This method of managing menus is recommended for menus with over 200 menu items, and it is required if you need more than five sublevels in any single branch of a menu (or six levels including the top level).
  • Differentiate the style of a single menu item for a specific page. For menus that use the Class Styled Menu, Breadcrumb, or Mega Menu content templates, you can set a page-specific property that designates a menu item as the active one. For example, if there were a page named “Support” and a menu item labeled “Support” that links to that page, this menu item could be set as the active menu item for that page. This allows your CSS developers to set a different style for a single menu item on a page. Active menu items can be set automatically using Smart Active Items for menus that use the Class Styled Menu content template. Setting the active menu item is a required step for Breadcrumb menus to determine the menu items that are displayed on the page.

Add, edit, and delete menu items

Menu items are added, edited, and deleted in the same way for each menu content template.

To add menu items to a Menu content item

  1. Open the menu in the content editor, and then click Add Menu Item. Optionally, you can select an existing menu item first if you want the new menu item to be added as a sub-level menu item. You can always change the placement of the menu item later.
  2. In the Edit Menu Item area, enter information for the following fields:
    • Label (required). The text that you want to appear on your menu item.
    • Sub Label. An additional label for the menu item that can be used with the Class Styled Menu template. For the sub label to appear, you must also set a sub label position in the Class Styled Menu content properties.
    • Group Number. A group number used for the Mega Menu template to group sets of links together. Menu items that should be listed as a group should have the same group number.
    • Class. You can enter a specific CSS class that your web developer or designer can reference to make the menu item look or act a certain way.
  3. Optionally, in the Sub-level menu area, click in the Menu box to select another menu content item that you want to be a sub-level menu of the new menu item. In the Add Content dialog, locate the menu and click the plus symbol under the Action column to select it.
  4. In the Behavior and Linkage area, select one of the following options from the Item Type list:
    • Link to page in this CMS. The menu item links to a page in OrchestraCMS. If you select this option, type or select the name of the page in the Page box. If the page you are linking to contains a taxonomy menu and taxonomy loader, you can optionally select a category to be set as the active menu item for the taxonomy menu. This means that the taxonomy loader automatically displays content for that category, and depending on how active menu items are styled for your site, it may also cause the taxonomy menu to automatically expand to the selected category. To do this, select a taxonomy from the Select Taxonomy list, and in the Select Category dialog, click the plus symbol next to a taxonomy category, and then click OK.
    • Link to a file in this CMS. The menu item links to a file in OrchestraCMS. If you select this option, you must select a file from the media library.
    • Link to a file or page on another site. The menu item links to a page or file that is not in OrchestraCMS. If you select this option, you must enter the URL for the page or file in the External URL box.
  5. Select one of the following options from the Open In list:
    • The Current Window. The link opens in the browser window the user currently has open.
    • A New Window. The link opens in a new browser window.
    • A Pop Up Window. The link opens in a pop-up window. If you select this option, you also have to enter the width and height of the window in pixels and a name for the window. The name of the pop up window for one menu item can be the same as the name of the pop up window for other menu items; if a user clicks multiple links that all open in a pop up window with the same name, only one window opens but the content changes.
  6. Optionally, if Private Sharing is enabled, under the Manage Access section, set access rules for the menu. If you are using a menu content template as part of a custom content type, the ability to apply sharing rules to child menu items is controlled by the content type properties.
  7. Click Save.

You can edit the above properties for a menu item if the menu is unpublished.  

To edit a menu item

  1. In the content editor, click on the dropdown icon next to the menu item.
  2. Click Edit Menu Item.
  3. In the Edit Menu Item window, change any fields as required.
  4. Click Save.

You can delete a menu item from a menu if the menu is unpublished. When a menu item is deleted, all sub-level menu items under that item are also removed.

To delete a menu item

  1. In the content editor, click on the dropdown icon next to the menu item.
  2. Click Delete.
  3. In the Warning dialog, click Delete.

Create and manage sub-level menus

After your menu items have been added, you can change the order they appear in and create a hierarchy, which defines sub-level menus. With the Class Styled Menu content template, your page template developers can use CSS to style sub-level menus to create drop-down menus or other types of layered menus.

Sub-level menus can be split from the parent menu and managed as a separate content item. The two menus display as a single menu when the parent menu is added to a page.

 

A single menu content item can have a maximum of six levels of menu items including the top level. If you require more levels than this, you must split the menu. We recommend that if your menu has over 200 menu items, you split one or more sub-level menus out of the parent menu to avoid issues with loading your menu on your live site.

Rearrange menu items and create a menu hierarchy

  • In the content editor, click the icon on the left end of a menu item and drag to change the order or placement of the menu item in the hierarchy.

You can split a sub-level menu from a parent menu item to manage it as a separate content item. A sub-level menu that is split from a parent menu item becomes a new menu content item that is a version 1.0, unpublished content item.

To split a sub-level menu from the parent menu item

  1. In the content editor, click to select the parent menu item.
  2. Click Split Menu.
  3. In the Split Menu dialog, click Continue.
  4. In the Menu Name box, enter a name for the sub-level menu content item. By default, the name is the label of the parent menu item.
  5. Click Split.

When a menu item is linked to a sub-level menu, the menu item displays a sub-level menu icon that can be clicked to open the sub-level menu in a new content editor section.

Set the active menu item

An active menu item can be set for menus that use the Class Styled Menu, Breadcrumb, or Mega Menu content templates. Setting the active menu item is used for two main purposes:

  • For menus that use the Breadcrumb content template, an active menu item must be set to determine which menu items are displayed on the page. The active menu item itself will not contain a link in the breadcrumb menu, but menu items higher in the menu hierarchy will contain links.
  • The active menu item can be styled differently or used to automatically expand the menu to that item; page template developers can configure these items for your site.

Typically, the active menu item for a page is set to the one that links to that page. For example, if you have a “Contact” menu item that links to a “Contact” page, the “Contact” menu item would usually be set as the active menu item for the “Contact” page. This configuration of active menu items can be automatically set for Class Styled Menu content items using smart active menu items.

You can also manually set the active menu item in the page-specific properties for the menu content item. When you use this method, you can choose any menu item to be the active item. In most cases, the active menu item is set to the one that links to the page you are configuring to allow site visitors to see their current location in the site. For Breadcrumb and Mega Menu content items, the active menu item can only be set as a page-specific property.

Set page-specific properties for a menu content item that uses the Class Styled Menu, Breadcrumb, or Mega Menu content template

  1. On the content item bar, click the arrow symbol.
  2. In the Page-specific Properties dialog, click Open Menu Item Selector.
  3. In the Select Menu Item dialog, locate and select the menu item that you want to make the active menu item, and then click Select.
  4. In the Page-specific Properties dialog, click Save.

Active menu items can’t be set for menus that use the Simple Horizontal Menu content template.

Breadcrumb

The Breadcrumb content template is useful for sites that are structured in a hierarchy with many levels. It creates a secondary navigation menu that shows the user his or her location in the website and allows them to access pages that are higher in the same branch of the hierarchy. The breadcrumb menu uses the hierarchy defined in the menu itself and not the site map.

 

Breadcrumb menus always include a link to the “home” page as the first node. With a multilingual OrchestraCMS license, you can provide a translation for this first “homepage” (root) node.

  1. In Salesforce Setup, expand Translation Workbench.
  2. In Translation Settings, click Enable.
  3. In Salesforce Setup, expand Create and select Custom Labels.
  4. On the Custom Labels page, select breadcrumb_homepage.
  5. Click New Local Translations/Overrides.
  6. Under Translation Information, choose a language.
  7. In the Translation Text box, type the translation for label of the root node.
  8. Click Save.

The active menu item must be set in the page-specific properties of a Breadcrumb menu to determine the menu items that are displayed on the page. Although the active menu item is typically set to the menu item that links to the current page, this does not have to be the case.

You can specify a hierarchy separator for breadcrumb menus. This is a character that is displayed between menu items. The following characters are commonly used: >, /, or |. Although it is not common, you can use more than one character for the hierarchy separator.

To specify a hierarchy separator for a breadcrumb menu

  • In the content editor, enter one or more characters in the Hierarchy separator box.

Class Styled Menu

The Class Styled Menu content template is typically used to create primary navigation menus that may have up to five layers of sub-level menus.

The CSS in your page template determines how the menu is displayed: horizontally, vertically, with drop-down sub-level menus, etc.

Settings for the Class Styled Menu content template are described in the following table. All settings are optional.

Class Styled Menu Settings

Field in content editor

Use to

Sub Label Position

Define where the sub labels for menu items appear. Sub labels do not appear at all if nothing is selected from this list. The custom styling of your menu also determines how sub labels appear.

Menu Title

Display a title with your menu. This is typically used with vertical menus.

Enable Smart Active Items

Set active menu items automatically on all pages. This option sets the active menu item on each page to the menu item that links to that page. For active menu items to appear differently from other menu items, the CSS for the site must include a unique style for active menu items.

Mega Menu

The Mega Menu content template is used to create menus that display groups of menu items in a single sub-level menu. For websites with many pages, this eliminates the need to have multiple sub-level menus and allows users to view more menu items at a single time.

When creating menu items, you can assign each menu item a group number. Menu items with the same group number appear in the same section of the Mega Menu sub-level menu. How the menu appears on a page is dependent on the CSS for your site.

Simple Horizontal Menu

The Simple Horizontal Menu content template is used to create menus without sub-level menus. This is ideal for websites with only a few pages. Any sub-level menus that are included in your menu structure do not appear if the menu uses the Simple Horizontal Menu content template.

Settings for the Simple Horizontal Menu content template are described in the following table. All settings are optional.

Simple Horizontal Menu settings

Field in content editor

Use to

Link Color

Set the text color (in hexadecimal) for the menu item links.

Link Hover Color

Set the text color (in hexadecimal) for when a user hovers the mouse pointer over a menu item link.

Link Font Size

Set the font size for the menu item links.

Divider Character

Set a character to appear between menu items. The following characters are commonly used: >, /, or |.